03/19 发表评论

功能需求

  1. 点击/滑屏切换;
  2. Tab 选项卡置底;
  3. 底部按钮悬浮,点击切换至第三个选项卡;
  4. 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
        })
    }
})

小程序代码片段:https://developers.weixin.qq.com/s/5s3WOZmo7163

发表评论

回到顶端