微信小程序实现底部导航栏目示例

---

微信小程序支持底部导航栏配置，app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

---

效果图

---

• 图标可以自己找，可以用阿里的图标库，下载之后放到对应的images目录，没有目录自己创建一个：

阿里图标库  http://www.iconfont.cn/collections/show/29

---

• 找到项目根目录中的配置文件 app.json 加入下面配置信息

"tabBar": {    "color": "#a9b7b7",    "selectedColor": "#11cd6e",    "borderStyle": "white",    "list": [      {        "selectedIconPath": "images/icon/index.png",        "iconPath": "images/icon/index1.png",        "pagePath": "pages/welcome/welcome",        "text": "首页"      },      {        "selectedIconPath": "images/icon/phone.png",        "iconPath": "images/icon/phone.png",        "pagePath": "pages/redirect/redirect",        "text": "公司电话"      },      {        "selectedIconPath": "images/icon/localtion1.png",        "iconPath": "images/icon/localtion.png",        "pagePath": "pages/redirect/redirect",        "text": "公司位置"      }    ]  }

• 对应的属性信息

tabBar  指底部的 导航配置属性color  未选择时 底部导航文字的颜色selectedColor  选择时 底部导航文字的颜色borderStyle  底部导航边框的样色（注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）list   导航配置数组selectedIconPath 选中时 图标路径iconPath 未选择时 图标路径pagePath 页面访问地址text  导航图标下方文字

---

官方地址：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

---

十步杀一人，千里不留行！