微信小程序01:底部菜单(tabBar)
2018-03-31 本文已影响0人
奶酪凌
第一步,准备底部菜单图标
tips:
1.小程序底部菜单标签个数不少于2个,最多不超过5个。
2.可以在阿里巴巴矢量图标库找到你需要的图标。
3.小程序建议图标大小为81*81px
我这边选择的是64尺寸的png图片,每一个图标选择两种颜色,分别对应未选中状态和选中状态,具体按照你们设计项目进行

第二步,更改配置文件(重点)
tips:
1.建立项目图片文件夹:images
2.在pages中建立相对应的菜单栏目文件夹
3.配置app.json:tabBar配置
//注意引号
"tabBar": {
"backgroundColor":"#ffffff",
"color":"#979797",
"selectedColor":"#ff7200",
"borderStyle":"#e5e5e5",
"list": [
{
"pagePath": "pages/index/index",
"iconPath":"images/tabbar1.png",
"selectedIconPath":"images/tabbar11.png",
"text": "首页"
},
{
"pagePath": "pages/user/user",
"iconPath": "images/tabbar4.png",
"selectedIconPath": "images/tabbar44.png",
"text": "我的"
}
]
}


第三步,实现

注意:
1.app.json中,"window":{}和"tabBar":{}是同级
2.全局配置
3.设置tabbar地址:wx.setTabBarBadge(Object object)