微信小程序tarBar使用

效果图

代码实现

app.json

{
  "pages":[
    "pages/start/start",
    "pages/quest/quest",
    "pages/show/show",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "tabBar":{
    "color": "#464a56",
    "selectedColor": "#6595e9",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "white",
    "list": [{
        "pagePath": "pages/start/start",
        "text": "开始",
        "iconPath": "images/home-off.png",
        "selectedIconPath": "images/home-on.png"
    },{
      "pagePath": "pages/quest/quest",
      "text": "表单",
      "iconPath": "images/fl-off.png",
      "selectedIconPath": "images/fl-on.png"
   },{
        "pagePath": "pages/show/show",
        "text": "表单",
        "iconPath": "images/fl-off.png",
        "selectedIconPath": "images/fl-on.png"
    }]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "问卷调查",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

注意

微信规范：list中的第一个路径必须和pages的第一个页面路径（即起始页）相同。不然无法出现效果。