https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html)， “” 可以下载相关代码
1.修改在app.json中的关于底部导航栏设置 “custom”: true
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
"tabBar": { "custom": true,//这个设置为true,标识启用自定义tabbar "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { "selectedIconPath": "image/index-select.png", "iconPath": "image/index.png", "pagePath": "pages/index/index", "text": "组件" }, { "selectedIconPath": "image/info-select.png", "iconPath": "image/info.png", "pagePath": "pages/info/info", "text": "接口" } ] } |
3.再对自定义导航栏进行一些交互设置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//修改custom-tab-bar/index.js 文件 const app = getApp(); Component({ data: { selected: 0, //当前选中的底部导航，从0索引开始 color: "#7A7E83", selectedColor: "#3cc51f", list: [] //tabBar的数据 }, lifetimes: { attached() { //设置tabbar内容，可在别的页面中对list进行赋值达到动态效果 this.setData({ list: app.globalData.list//这里获取globalData里的list数据做为导航内容 }) }, }, methods: { switchTab(e) { //对点击tabbar进行跳转 const data = e.currentTarget.dataset; const url = data.path; wx.switchTab({ url }); } } }) |
4.设置导航数据 ，在app.js自定义globalData中添加数据，页面通过判断可以更改globalData.list从而更改导航
|
1 2 3 4 5 6 7 8 9 |
globalData: { "list": [{ "pagePath": "page/component/index", "text": "组件" }, { "pagePath": "page/API/index", "text": "接口" }] } |
5.在tabbar界面增加交互，代码放在onshow中
|
1 2 3 4 5 |
if (typeof this.getTabBar === 'function' &&this.getTabBar()){ this.getTabBar().setData({ selected: 0 //当前选中的底部导航，从0索引开始 }) } |