功能需求
- 点击/滑屏切换；
- Tab 选项卡置底；
- 底部按钮悬浮，点击切换至第三个选项卡；
- Tab 切换内容区可滚动；
实现逻辑： 利用 CSS 定位布局，将 Tab 选项卡和底部按钮分别固定定位置顶/置底；使用 CSS 函数 calc() 动态计算 Tab 切换内容区高度；使用 scroll-view 组件，内容区实现滚动；
小二儿，上代码~
<view class="m-exam">
<view class="tab-hd">
<view class="tab-slide {{currentPage == index ? 'tab-slide-active' : ''}}" wx:for="{{examHd}}" wx:key="{{index}}" bindtap="onClickTab" data-index="{{index}}">{{item}}</view>
</view>
<swiper class="tab-bd" current="{{currentPage}}" bindchange="onSlideTab">
<swiper-item class="tab-box exam-question">
<scroll-view class="tab-scroll" scroll-y>
<view class="tab-cnt">
<!-- 内容区 -->
</view>
</scroll-view>
</swiper-item>
<swiper-item class="tab-box exam-material">
<scroll-view class="tab-scroll" scroll-y>
<view class="tab-cnt">
<!-- 内容区 -->
</view>
</scroll-view>
</swiper-item>
<swiper-item class="tab-box exam-answer">
<view class="exam-state">
<view class="state-icon"><view class="iconfont icon-duihao"></view></view>
<text class="state-tit">答案提交成功</text>
<text class="state-txt">老师将在24小时内完成批改\r\n批改前仍可修改并重新提交答案</text>
</view>
<view class="exam-btn">重新拍照上传答案</view>
</swiper-item>
</swiper>
<view class="tab-ft exam-fixed" hidden="{{currentPage == 2}}">
<view class="exam-btn" bindtap="toggleAnswer">选项卡三</view>
</view>
</view>page{height:100%;background:#fff;}
.f-dn{display:none !important;}
.m-exam{box-sizing:border-box;height:100%;padding-top:80rpx;}
.m-exam .tab-hd{position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:80rpx;background:#f8f8f8;z-index:9;}
.m-exam .tab-slide{position:relative;display:flex;align-items:center;justify-content:center;flex:1;height:100%;font-size:28rpx;color:#323232;}
.m-exam .tab-slide-active{color:#4266f6;}
.m-exam .tab-slide-active:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:4rpx;background:#4266f6;}
.m-exam .tab-bd{box-sizing:border-box;height:100%;overflow:hidden;}
.m-exam .tab-box{box-sizing:border-box;width:100%;height:100%;line-height:44rpx;font-size:28rpx;color:#585858;overflow:auto;-webkit-overflow-scrolling:touch;}
.m-exam .tab-scroll{width:100%;height:100%;}
.m-exam .tab-cnt{box-sizing:border-box;width:100%;padding:32rpx 32rpx 146rpx;}
.m-exam .exam-fixed{box-sizing:border-box;position:fixed;left:0;bottom:0;width:100%;padding:32rpx 48rpx;z-index:9;}
.m-exam .exam-btn{width:100%;height:82rpx;margin:0 auto;text-align:center;line-height:82rpx;background:#4266f6;border-radius:82rpx;box-shadow:0 3rpx 18rpx rgba(72,107,246,.27);font-size:32rpx;color:#fff;}
.m-exam .exam-question{font-size:28rpx;color:#585858;}
.m-exam .exam-material{}
.m-exam .exam-answer{padding:32rpx 48rpx;}
.m-exam .exam-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.m-exam .exam-upload .upload-img{width:614rpx;height:534rpx;}
.m-exam .exam-upload .upload-txt{margin:40rpx 0 48rpx;text-align:center;line-height:38rpx;font-size:26rpx;color:#323232;}
.m-exam .exam-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:192rpx 0;}
.m-exam .exam-state .state-icon{width:118rpx;height:118rpx;text-align:center;line-height:118rpx;background:#4266f6;border-radius:100%;box-shadow:0 3rpx 18rpx rgba(72,107,246,.27);font-size:32rpx;color:#fff;}
.m-exam .exam-state .state-tit{margin:80rpx 0 16rpx;font-size:34rpx;color:#323232;}
.m-exam .exam-state .state-txt{line-height:48rpx;font-size:26rpx;color:#666;}Page({
/**
* 页面的初始数据
*/
data: {
examHd: ['选项卡一', '选项卡二', '选项卡三'],
currentPage: 0 // 当前页
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* Tab 切换
*/
onClickTab: function (e) {
this.setData({
currentPage: e.currentTarget.dataset.index
})
},
/**
* 滑动切换
*/
onSlideTab: function (e) {
this.setData({
currentPage: e.detail.current
})
},
/**
* 切换作答
*/
toggleAnswer: function () {
this.setData({
currentPage: 2
})
}
})