微信小程序入门二：底部导航tabBar

小程序底部导航栏组件tabBar，可以参考下官方的API：tabBar

先看代码

//app.json
{
  "pages":[
    "pages/index/index",
    "pages/share/share",
    "pages/user/user"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信小程序入门二：底部导航tabBar",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "8f9095",
    "selectedColor": "7acfa6",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/home1.png",
      "selectedIconPath": "images/home2.png"
    },
    {
      "pagePath": "pages/share/share",
      "text": "发现",
      "iconPath": "images/clud1.png",
      "selectedIconPath": "images/clud2.png"
    },
    {
      "pagePath": "pages/user/user",
      "text": "我",
      "iconPath": "images/user1.png",
      "selectedIconPath": "images/user2.png"
    }]
  }
}

tabBar  指底部的 导航配置属性

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

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

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

list   导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text  导航图标下方文字

 

 

注意tabBar要求底栏至少有两个。

 

源码下载：https://download.csdn.net/download/ber_bai/10556065