<!-- 课程详情 选项卡 开始-->//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 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦