微信小程序（4）底部导航

　　底部导航样式

　　　　　　　　

 

　　1. 图标准备

　　　　可到 阿里图标库 http://www.iconfont.cn/collections/show/29 进行下载。

　　

　　2. 在项目跟目录下创建一个 images 文件存放图标，每个图标有两个文件，一个是未选中时的图标 ，一个时选中时显示的图标；图标名字中带有 sel 文字的为选中状态时图标

　　　　　　　　　　

　　

　　3.  修改 app.json，将以下代码加入到 app.json 中，如图：

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/home-sel.png",
        "iconPath": "images/home.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/report-sel.png",
        "iconPath": "images/report.png",
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
        "selectedIconPath": "images/my-sel.png",
        "iconPath": "images/my.png",
        "pagePath": "pages/test/test",
        "text": "轮播滑块"
      }
    ]
  }

　　　　

 

　　参考：

　　　　　　微信小程序从零开始开发步骤（三）底部导航栏（https://www.jianshu.com/p/89a63dc99839）