微信小程序尾部导航

微信小程序尾部导航

进入app.json文件中设置，具体其他参数设置可以看官方文档：http://https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

"tabBar":{
"color":"lightgray",            /* 默认的字体颜色 */
"selectedColor":"darkred",      /* 选中的字体颜色 */
 "list":[{
    "selectedIconPath":"images/shouye1.png",    /* 选中的图标 */
    "iconPath": "images/shouye.png",            /* 默认的图标 */
    "pagePath":"pages/index/index",
    "text":"首页"
 },
 {
   "selectedIconPath": "images/fenlei1.png",    /* 选中的图标 */
    "iconPath": "images/fenlei.png",            /* 默认的图标 */
    "pagePath": "pages/fen/fen",
    "text": "分类"
 },
  {
  "selectedIconPath": "images/cart1.png",      /* 选中的图标 */
  "iconPath": "images/cart.png",               /* 默认的图标 */
  "pagePath": "pages/cart/cart",
  "text": "购物车"
},
{
  "selectedIconPath": "images/wo1.png",        /* 选中的图标 */
  "iconPath": "images/wo.png",                 /* 默认的图标 */
  "pagePath": "pages/person/person",
  "text": "我的"
}]
}

解释一下 对应的属性信息
tabBar 指底部的 导航配置属性

color 未选择时 底部导航文字的颜色

selectedColor 选择时 底部导航文字的颜色

borderStyle 底部导航边框的样色（注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）

list 导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text 导航图标下方文字