微信小程序（底部导航）

底部导航：

 

 在app.json中 包含了全局的配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/wlist/wlist"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F5F5F5",
    "navigationBarTitleText": "weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#A9A9A9",
    "selectedColor": "",
    "backgroundColor": "#F5F5F5",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/icon_home.png",
        "selectedIconPath": "image/icon_home_selected.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/wlist/wlist",
        "iconPath": "image/icon_cate.png",
        "selectedIconPath": "image/icon_cate_selected.png",
        "text": "列表"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

其中

Pages对应的是不同的界面 在全局json文件中 pages里的首个代码就为首页 这里的首页就是index

window代表的是窗口外观

而我们需要用到的底部导航 就是 tarbag

color代表未选中的颜色 selectedcolor表示选中此项后的颜色 backgroundcolor就是背景颜色

颜色这里只支持16进制 API 颜色 

 颜色可以从上面对照

list为开了一个数组 存放底下的交互

        "pagePath": "pages/index/index",
        "iconPath": "image/icon_home.png",
        "selectedIconPath": "image/icon_home_selected.png",
        "text": "首页"

pagepath 后面跟的为 点击后跳转的界面 如果没有跳转的界面存在会报错

iconpath 为还没选择此项时候的图片路径

selecticonpath 为选择此项后的图片路径

text 为图片底下的文字

 图片可以在项目的工程文件下建立一个image 里面存放所需的png

保存编译之后 模拟器就会显示底部导航栏

需要多少个就在list里面放几个