微信小程序实现导航栏动态切换的样式以及内容。

我使用的不是小程序自带的动态切换的标签，使用的是通过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": "我的"
      }
    ]
  }