🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[![gL8KOI.md.png](https://z3.ax1x.com/2021/05/22/gL8KOI.md.png)](https://www.guqule.com) 丸子官方网站:[www.guqule.com](https://www.guqule.com) 丸子客服微信:hackdxd * [ ] **特别注意提醒** 除了丸子小程序其他渠道购买全部为盗版产品,丸子客服微信:hackdxd ## 底部菜单修改 除了丸子小程序其他渠道购买全部为盗版产品,丸子客服微信:hackdxd 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 函数删除上面的那部分内容。