WXML导航栏<view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? ‘on‘ : ‘‘}}" data-current="0" bindtap="swichNav">未完成</view> <view class="swiper-tab-list {{currentTab==1 ? ‘on‘ : ‘‘}}" data-current="1" bindtap="swichNav">已完成</view></view>内容<swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange"> <swiper-item class="swiper-item"> 未完成内容 </swiper-item> <swiper-item class="swiper-item"> 已完成内容 </swiper-item></swiper>

JS data: { currentTab: 0},// tab切换逻辑 swichNav: function( e ) { var that = this; if( this.data.currentTab === e.target.dataset.current ) { return false; } else { that.setData( { currentTab: e.target.dataset.current }) } }, bindChange: function( e ) { var that = this; that.setData( { currentTab: e.detail.current }); },

WXSS.swiper-tab { width: 100%; text-align: center; height: 100rpx; line-height: 100rpx; padding: 0 60rpx; margin-top: 20rpx; margin-bottom: 20rpx; background-color: rgb(255, 255, 255); display: flex; justify-content: space-around;}.swiper-tab-list { font-size: 30rpx; display: inline-block; width: 30%; color: #666666;}.on { color: #FDA53B; border-bottom: 5rpx solid #FDA53B;}.swiper-box { display: block; width: 100%; overflow: hidden; box-sizing: border-box; font-family: "苹方-简 常规体"; height: 80vh;}.swiper-box .swiper-item { padding: 0 25rpx; box-sizing: border-box; width: 100%; height: 100%; overflow-y: scroll;}