小程序--导航栏切换（tab切换）

Posted 2020-12-19 你的亏亏

1.展示

 

2.代码片段

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;
}