微信小程序——自定义tabbar样式

---

纪年科技aming
网络安全 ,深度学习,嵌入式,机器强化,生物智能,生命科学。

---

 <view class="nav-tabs">
    <view class="tab-list  {{currentTab == idx?'active':'default'}}" 
    wx:for="{{tabArray}}" 
    wx:for-index="idx" 
    wx:for-item="itemName" 
    data-current="{{idx}}" 
    bindtap="swichNav">{{itemName}}
    </view>
</view>

  <view class="{{currentTab == idx?'show':'hidden'}} tab-content" wx:for="{{tabArray}}" wx:for-index="idx" wx:for-item="itemName">{{itemName}}</view>

<!--可滑动切换tanbar-->
<view class="nav-tabs">
    <view class="tab-list  {{currentTab == idx?'active':'default'}}" wx:for="{{tabArray}}" wx:for-index="idx" wx:for-item="itemName" data-current="{{idx}}" bindtap="swichNav">{{itemName}}</view>
</view>

 <swiper current="{{currentTab}}" class="tab-content" duration="300"  bindchange="bindChange">  
<swiper-item wx:for="{{tabArray}}" wx:for-index="idx" wx:for-item="itemName" class="">
    <view class="">{{itemName}}</view> 
</swiper-item>
</swiper>  

 /**index.wxss**/
page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.nav-tabs{
  width: 100%;
  height: 75rpx;
  display: flex;   
}
.tab-content{
  flex: 1;
}
.default{
    line-height:75rpx;
    text-align:center;
    flex:1;
    border-bottom:1px solid #eee;
    color:#000;
    font-weight:bold;
    font-size:28rpx;  
}
.active{
    line-height:75rpx;
    text-align:center;
    color:#fc5558;
    flex:1;
    border-bottom:1px solid red;
    font-weight:bold;
    font-size:28rpx;
}
.show{
    display:block;
    flex: 1;
}
.hidden{
    display:none;
    flex: 1;
}

 data: {
    currentTab:0,
    tabArray:["tab1", "tab2", "tab3", "tab4"]
  },

  bindChange: function( e ) { 
    var that = this;  
    that.setData( { currentTab: e.detail.current });  
  },  

 swichNav: function( e ) {  
    var that = this;  
    console.log(e.target)
    if( this.data.currentTab === e.target.dataset.current ) {  
      return false;  
    } else {  
      that.setData( {  
        currentTab: e.target.dataset.current  
      })  
    }  
  },