微信小程序的选项卡 并可以禁止手指的左右滑动
2018-10-31 本文已影响0人
郭的妻
<!-- 课程详情 选项卡 开始-->
//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
})
}
},