支付宝小程序tab切换滑动

{{item.type}}





{{item.question}}

clicktab(e){
var c=e.currentTarget.dataset.index;
this.setData({
current:c
})
},
switchNav(event){
var cur = event.currentTarget.dataset.current;
//每个tab选项宽度占1/5
var singleNavWidth = this.data.windowWidth / 5;
//tab选项居中
this.setData({
navScrollLeft: (cur - 2) * singleNavWidth
})
if (this.data.current == cur) {
return false;
} else {
this.setData({
current: cur
})
}
},
switchTab(event){
var cur = event.detail.current;
var singleNavWidth = this.data.windowWidth / 5;
this.setData({
current: cur,
navScrollLeft: (cur - 2) * singleNavWidth
});
},

.nav { height: 80rpx; width: 100%; box-sizing: border-box; overflow: hidden; line-height: 76rpx; background: #f7f7f7; font-size: 14px; white-space: nowrap; display: flex; box-sizing: border-box; } .nav::-webkit-scrollbar { display: none; } .nav-item { flex-shrink: 0; -webkit-box-flex: 0; flex-grow: 0; width: 25%; height: 76rpx; text-align: center; } .nav-item.active{ color:cornflowerblue; border-bottom: 2px solid cornflowerblue; } .tab-box{ height: 480px !important; background:#fff; box-sizing: border-box; } .tab-content{ overflow-y: auto; }