<!-- 课程详情 选项卡 开始-->//html<view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view> <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">提现中</view> <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">已提现</view> <view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">已提现</view></view><!-- 内容转换区 开始 --><swiper class='swiper-box' current="{{currentTab}}" duration="300" bindchange="swiperTab"> <swiper-item catchtouchmove="stopTouchMove"><view>全部</view></swiper-item> <swiper-item catchtouchmove="stopTouchMove"><view>提现中</view></swiper-item> <swiper-item catchtouchmove="stopTouchMove"><view>已提现</view></swiper-item> <swiper-item catchtouchmove="stopTouchMove"><view>已提现</view></swiper-item> </swiper> <!-- 内容转换区 结束 -->//css .swiper-tab { width: 100%; text-align: center; line-height: 80rpx; background-color:white; position: fixed; top:420rpx; left:0rpx; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; } .swiper-tab-item{ width: 25%; font-size: 32rpx; color:#434343; } .active{ color:#027ee7; border-bottom: 3rpx solid #027EE7; } .swiper-box { width:100%; height:100%; position: fixed; top: 504rpx; left: 0rpx; } //js Page({ /*页面的初始数据 */ data: { currentTab: 0 }, //禁止选项卡的左右滑动 stopTouchMove: function () { return false; }, // 选项卡转换 clickTab: function (e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } },
作者:释怀Believemin
链接:https://www.jianshu.com/p/a3507518aaa2
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦