比如我们想定义这样的tabbar原生就无法为我们满足,
微信小程序有对应的tabbar定制只需要在app.json文件配置即可。
"tabBar": { "custom": true, "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/user/user", "iconPath": "./assimg/hd.png", "selectedIconPath": "./assimg/hds.png", "text": "活动" }, { "pagePath": "pages/index/index", "iconPath": "./assimg/dh.png", "selectedIconPath": "./assimg/hds.png", "text": "导航" }, { "pagePath": "pages/navigator/navigator", "iconPath": "./assimg/md.png", "selectedIconPath": "./assimg/hds.png", "text": "我的" } ] },
1.新建custom-tab-bar文件夹
*必须先在json设置"custom": true,才能自定义我们的tabbar
//我们编辑js代码 Component({ data: { selected: 0, color: "#7A7E83", selectedColor: "#3cc51f", "list": [{ "pagePath": "/pages/index/index", "iconPath": "../assimg/hd.png", "selectedIconPath": "../assimg/hds.png", "text": "活动" }, { "pagePath": "/pages/navigator/navigator", "iconPath": "../assimg/dh.png", "selectedIconPath": "../assimg/dhs.png", "text": "导航", "diyClass": "diy" }, { "pagePath": "/pages/user/user", "iconPath": "../assimg/md.png", "selectedIconPath": "../assimg/mds.png", "text": "我的" } ] }, attached() {}, onShow: function () { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 }) } }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path this.setData({ selected: data.index }) wx.switchTab({ url }) } }, })
//wxhtml页面代码 <!--miniprogram/custom-tab-bar/index.wxml--> <cover-view class="tab-bar"> <!-- <cover-view class="tab-bar-border"></cover-view> --> <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.diyClass}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" class="{{item.diyClass}}"></cover-image> <cover-view style="color: {{selected === index ? selectedColor : color}}" class="{{item.diyClass}}">{{item.text}}</cover-view> </cover-view> </cover-view>
由于自定义的tabbar效果很强但是也带来了很多问题比如切换空白等等,亲们在自定义的时候如果不是真的需求需要尽量使用原生定义的