WeChat MiniProgram] [003 - set the bottom navigation bar of the tabBar set and the top navigation bar

Bottom navigation bar tabBar

The nature of the tabBar

Several one page entry link

tabBar configuration

1. Needed to prepare the navigation bar icon, and placed on file in the root directory named icons folder;

2. In app.json the region's profile in adding "tabBar" attributes
   sample code:

"tabBar":{
    "list":[
      {
        "text": "每周推荐",
        "pagePath": "pages/weekly/weekly",
        "iconPath": "images/icons/ExploreG.png",
        "selectedIconPath": "images/icons/Explore.png"
      },
      {
        "text": "关于",
        "pagePath": "pages/about/about",
        "iconPath": "images/icons/UserG.png",
        "selectedIconPath": "images/icons/User.png"
      }
    ]

Note: {} is the object enclosed, [] is an array of objects

3. Configuring text navigation bar select the color and non-color selected

"tabBar":{
    "color": "#dbdbdb",
    "selectedColor": "#2c2c2c"
    }

Top navigation bar

Top navigation related properties

1. Navigation bar title text
   "navigationBarTitleText": "About"

2. Navigation bar background color
   "navigationBarBackgroundColor": "#fff"

3. Navigation bar title text style
   "navigationBarTextStyle": "black"

Configure the top navigation bar

1. .Json profile page

2. Global configuration file App.json window attribute
   sample code:

"window" : {
    "navigationBarTextStyle" : "black",
    "navigationBarBackgroundColor" : "#fff",
    "navigationBarTitleText": "电影周周看"
}

NOTE: If the repeat certain attributes defined in the configuration file of the page, then the global attributes to be covered