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

矫情吗；* 2021-07-26 01:52 766阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]

--------------------

QQ 1274510382  
Wechat JNZ\_aming  
商业联盟 QQ群538250800  
技术搞事 QQ群599020441  
解决方案 QQ群152889761  
加入我们 QQ群649347320  
共享学习 QQ群674240731  
纪年科技aming  
网络安全 ,深度学习,嵌入式,机器强化,生物智能,生命科学。

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70_pic_center 1]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70_pic_center 2]

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  
          })  
        }  
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]: /images/20210725/2535a895f280442aa30eadbe85fe1b1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200903185254724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/0ee6295980b4460baaf1fd0513474873.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/314bfad7a59544fa95fabc1413eb7f85.png