微信小程序实现导航栏动态切换的样式以及内容。
我使用的不是小程序自带的动态切换的标签,使用的是通过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": "我的" } ] }