wxml部分

<viewclass="swiper-tab"> <viewclass="swiper-tab-list{{currentTab==0?'on':''}}"data-current="0"bindtap="swichNav">tab1</view> <viewclass="swiper-tab-list{{currentTab==1?'on':''}}"data-current="1"bindtap="swichNav">tab2</view> <viewclass="swiper-tab-list{{currentTab==2?'on':''}}"data-current="2"bindtap="swichNav">tab3</view> </view> <swipercurrent="{{currentTab}}"class="swiper-box"duration="300"style="height:{{winHeight-31}}px" bindchange="bindChange"> <swiper-item> <viewclass="item1"></view> </swiper-item> <swiper-item> <viewclass="item2"></view> </swiper-item> <swiper-item> <viewclass="item3"></view> </swiper-item> </swiper> //滾動條設定 <scroll-viewscroll-y="true"style="height:{{height}}rpx;width:100%"bindscrolltoupper="upper" bindscrolltolower="lower"bindscroll="scroll"scroll-into-view="{{toView}}"scroll-top="{{scrollTop}}"> css部分

.swiper-tab{ width:100%; height:100rpx; text-align:center; line-height:90rpx; background-color:#fff; padding:052rpx; box-sizing:border-box; } .swiper-tab-list{font-size:30rpx; display:inline-block; width:33%; color:#AAAAAA; } .on{color:rgba(67,130,255,1); border-bottom:5rpxsolidrgba(67,130,255,1);} .swiper-box{display:block;height:100%;width:100%;overflow:hidden;} .swiper-boxview{ text-align:center; } .item1{ width:100%; /*height:1200rpx;*/ background-color:rgb(250,250,250); padding:20rpx0; box-sizing:border-box; } js部分

//tab切換 currentTab:0, /** *滑動切換tab */ bindChange:function(e){ varthat=this; that.setData({currentTab:e.detail.current}); }, /** *點選tab切換 */ swichNav:function(e){ varthat=this; if(this.data.currentTab===e.target.dataset.current){ returnfalse; }else{ that.setData({ currentTab:e.target.dataset.current }) } }