[![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 函数删除上面的那部分内容。
- 丸子小程序介绍
- 系统介绍
- 版权公告
- 购买产品
- 疑问解答
- 增值服务
- 域名服务器安装配置
- 域名解析配置
- 服务安装配置
- 视频教程安装
- 宝塔面板安装配置
- 开始安装宝塔面板
- 宝塔面板环境安装
- 宝塔安装WordPress网站
- 新建WordPress站点
- 安装配置WordPress站点
- WordPress配置SSL伪静态
- 小程序注册配置
- 小程序注册
- 小程序配置
- 安装配置小程序插件
- 下载小程序插件
- 安装小程序插件
- 激活小程序插件
- 设置小程序插件
- 安装插件中心扩展
- 资讯版配置
- 插件配置
- 常规配置
- 优化设置
- 功能扩展
- 焦点设置
- 广告设置
- 积分设置
- 微信搜一搜内容接入
- 分类设置
- 文章发布
- 订阅消息设置
- 小程序源码下载
- 小程序源码导入
- 小程序提交审核
- 二开/常见问题解决
- 页面路径
- 页面背景@版权等修改
- 页面配置修改
- 代码高亮设置
- 修改字段
- 修改logo
- 百度小程序SEO说明
- 评论审核失败解决
- uniapp编译教程
- uniapp基础安装说明
- uniapp详细编译丸子小程序
- 社区版配置
- 插件基本设置
- 社区话题配置
- 创建圈子设置
- 签到打卡圈子
- 如何发布话题
- 商城配置教程
- 积分阅读配置
- 消息发送设置
- 商品卡设置
- 订阅消息配置
- 邮件通知配置
- 云存储配置
- 腾讯云OSS设置
- 阿里云OSS设置
- 七牛云存储设置
- 广告教程设置
- 小程序源码下载
- 开发者工具导入源码
- 提交审核
- 二开/常遇到问题
- 丸子社区(丸小圈)底部 tabBar 菜单修改教程
- 社区版小工具配置及饿了么返佣设置教程
- 小程序直播配置
- 摘要超出解决
- 发布评论审核问题解决
- 问题帮助指南
- 文章圈子话题置顶
- 全网服务器推荐
- WordPress进阶版