微信小程序實現導航欄動態切換的樣式以及內容。

我使用的不是小程序自帶的動態切換的標簽，使用的是通過id綁定的方式。

wxml中：  名字隨便取的不喜勿噴
<view class='brandNav'>
    <view  data-id="0" bindtap="changeTabbar1" class="tui-tabbar-cell {{index == 0 ? 'tui-active' : ''}}">品牌</view>
    <view data-id="1" bindtap="changeTabbar2" class="tui-tabbar-cell {{index == 1 ? 'tui-active' : ''}}">{{meizhuang.name}}</view>
    <view data-id="2" bindtap="changeTabbar3" class="tui-tabbar-cell {{index == 2 ? 'tui-active' : ''}}">{{fushi.name}}</view>
    <view data-id="3" bindtap="changeTabbar4" class="tui-tabbar-cell {{index == 3 ? 'tui-active' : ''}}">{{xiangbao.name}}</view>
    <view data-id="4" bindtap="changeTabbar5" class="tui-tabbar-cell {{index == 4 ? 'tui-active' : ''}}">{{jiaju.name}}</view>
</view> 

<view class='brand1' wx:if="{{index == 0}}">
            <image src='{{item.logo}}' class='brandImg' data-id='{{item.id}}'> 
            </image>  
 </view>
<view class='brand2' wx:if="{{index == 1}}">
            <image src='{{item.logo}}' class='brandImg' data-id='{{item.id}}'> 
            </image>  
 </view>
<view class='brand3' wx:if="{{index == 2}}">
            <image src='{{item.logo}}' class='brandImg' data-id='{{item.id}}'> 
            </image>  
 </view>
                         。
                         。
                         。
                         。
 
js中：
 changeTabbar1(e) {
    this.setData({
      index: e.currentTarget.dataset.id,
    })
  },
 changeTabbar2(e) {
    this.setData({
      index: e.currentTarget.dataset.id,
    })
  },
 changeTabbar3(e) {
    this.setData({
      index: e.currentTarget.dataset.id,
    })
  },
                           。
                           。
                           。

如果是底部導航欄 一般情況下多少用小程序的組件tabBar，兼容性非常強，就是可配置參數少了一些，不足以滿足一些需求。也可以自己的重寫一個tabBar，參照他的配置格式

原生的方法是在app.json中配置一下：

 "tabBar": {
    "color": "#B3B3B3",
    "selectedColor": "#E6C593",
    "borderStyle": "white",
    "backgroundColor": "black",
    "list": [
      {
        "selectedIconPath": "images/bbb.png",
        "iconPath": "images/bbb.png",
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "selectedIconPath": "images/fff.png",
        "iconPath": "images/dd.ddpng",
        "pagePath": "pages/brand/brand",
        "text": "分類"
      },
      {
        "selectedIconPath": "images/aaaa.png",
        "iconPath": "images/aa.png",
        "pagePath": "pages/shoppingbag/shoppingbag",
        "text": "購物車"
      },
      {
        "selectedIconPath": "images/xx.png", 點擊選擇時的狀態
        "iconPath": "images/xx.png",
        "pagePath": "pages/userCenter/userCenter",
        "text": "我的"
      }
    ]
  }