# [丸子社区(丸小圈)底部 tabBar 菜单修改教程](https://www.weitimes.com/doc/guide/1400.html#1400)
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 函数删除上面的那部分内容。
