支付宝小程序tab切换滑动

<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<block a:for="{{q_type}}" a:key="{{index}}">
<view class="nav-item {{current == index ?'active':''}}" data-current="{{index}}" onTap="switchNav">{{item.type}}</view>
</block>
</scroll-view>
<swiper class="tab-box " current="{{current}}" duration="300" onChange="switchTab">
<swiper-item a:for="{{q_type}}" a:key="{{index}}" class="tab-content">
<view a:for="{{item.listitem}}" a:key="{{index}}" data-delet="{{item.id}}" class="questionitem" onTap="AppQItem" >
{{item.question}}
</view>
</swiper-item>
</swiper>

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;

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;

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;

}