微信小程序01:底部菜单(tabBar)

2018-03-31  本文已影响0人  奶酪凌

第一步,准备底部菜单图标

tips:
1.小程序底部菜单标签个数不少于2个,最多不超过5个。
2.可以在阿里巴巴矢量图标库找到你需要的图标。
3.小程序建议图标大小为81*81px
我这边选择的是64尺寸的png图片,每一个图标选择两种颜色,分别对应未选中状态和选中状态,具体按照你们设计项目进行

图标选择.jpg

第二步,更改配置文件(重点)

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": "我的"
     }
   ]
 }
项目目录.jpg
app.json.png

第三步,实现

示例.png

注意:

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

上一篇 下一篇

猜你喜欢

热点阅读