Wechat applet 01 bottom navigation bar settings

design sketch

Operation steps ： 

1 stay app.json find  pages, increase pages Configure address bar path , After saving, the corresponding folder will be automatically generated ;

2, increase   tabBar  Parameters ,“selectedColor” The parameter is to set the color of the selected text ;"list" Place navigation data in .

     list in Related parameters ： pagePath ----> Pointing to the address

                                  text   ---->    Navigation text

                                  iconPath   ----->  Navigation icons

                                  selectedIconPath  ----->  Select the navigation icon          

{
  "pages": [
    "pages/index/index",
    "pages/list/list",
    "pages/mine/mine",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": " Xiaozhe personal store ",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#eeeeee"
  },
  "tabBar": {
    "selectedColor": "#fc5531",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": " home page ",
        "iconPath": "./images/home.png",
        "selectedIconPath": "./images/selected-home.png"
      },
      {
        "pagePath": "pages/list/list",
        "text": " list ",
        "iconPath": "./images/list.png",
        "selectedIconPath": "./images/selected-list.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": " my ",
        "iconPath": "./images/mine.png",
        "selectedIconPath": "./images/selected-mine.png"
      }
    ]
  },
  "debug": true,
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}