小程序纵向选项卡可以滑动_微信小程序的选项卡 并可以禁止手指的左右滑动...

//html

全部

提现中

已提现

已提现

全部

提现中

已提现

已提现

 //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