丸子社区(丸小圈)底部 tabBar 菜单修改教程

最后更新于：2021-04-13

1、修改 app.json 的 “tabBar” 项中的 “list” 列表项。

"tabBar": {"custom": true,"color":"#3C3C3C","selectedColor":"#35495e","borderStyle":"black","backgroundColor":"#ffffff","list": [ {"pagePath":"pages/tabbar/index/index","iconPath":"/image/home_d@3x.png","selectedIconPath":"/image/home_d@3x.png"}, {"pagePath":"pages/tabbar/circle/circle","iconPath":"/image/home_d@3x.png","selectedIconPath":"/image/home_d@3x.png"}, {"pagePath":"pages/tabbar/message/message","iconPath":"/image/home_d@3x.png","selectedIconPath":"/image/home_d@3x.png"}, {"pagePath":"pages/tabbar/mine/mine","iconPath":"/image/home_d@3x.png","selectedIconPath":"/image/home_d@3x.png"} ] },

注意：pagePath 页面地址不能带有参数，即不支持 pages/detail/detail?id=88 类似这种带有问号参数的链接

2、修改 custom-tab-bar 目录里的 index.js 的 “list” 对应的 pagePath 与 app.json 里的 “list” 对应的 pagePath 相同

data: { selected: 0, unReadMessageCount: 0, sysMessageCount: 0, color:"#B0A9A3", selectedColor:"#2E2E2E", fontWeight:"bold", list: [{ pagePath:"/pages/tabbar/index/index", iconPath:"/image/tabbar/tab_index_normal.png", selectedIconPath:"/image/tabbar/tab_index_active.png", text:"首页"}, { pagePath:"/pages/tabbar/circle/circle", iconPath:"/image/tabbar/tab_nearby_normal.png", selectedIconPath:"/image/tabbar/tab_nearby_active.gif", text:"圈子"}, { pagePath:"/pages/creat/creat", iconPath:"/image/tabbar/icon_add.png", selectedIconPath:"/image/tabbar/icon_add.png", text:"", isSpecial: !0 }, { pagePath:"/pages/tabbar/message/message", iconPath:"/image/tabbar/tab_message_normal.png", selectedIconPath:"/image/tabbar/tab_message_active.png", text:"消息"}, { pagePath:"/pages/tabbar/mine/mine", iconPath:"/image/tabbar/tab_user_normal.png", selectedIconPath:"/image/tabbar/tab_user_active.png", text:"我的"}] },

注意：除了中间发布的按钮，其他页面的参数及顺序必须一致。

3、修改指定 pagePath 页面的 js 文件 onShow 函数加上对应内容

onShow: function () {"function"== typeof this.getTabBar && this.getTabBar() && this.getTabBar().setData({ selected: 1 }) //其他代码部分},

注意：selected 的值是 custom-tab-bar/index.js 参数 “list” 对应的位置

假如你修改了消息位置为资讯，那么就要在资讯页对应的 js 页面，onShow 函数加上以下内容

"function"== typeof this.getTabBar && this.getTabBar() && this.getTabBar().setData({ selected: 3 })

因为，消息位置是在 custom-tab-bar/index.js 的 “list” 列表中属于第 3 项(从 0 计算)。

另外，需要把对应的 message.js 里的 onShow 函数删除上面的那部分内容。