Wechat applet: fixed navigation bar at the bottom

app.json file:

{
  "pages": [  
    "pages/index/index",
    "pages/logs/logs",
    "pages/samplereels/samplereels",
    "pages/discover/discover",
    "pages/shop/shop",
    "pages/person/person"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#2f2f2f",
    "selectedColor": "#216d8d",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "home page",
        "iconPath": "images/tap_bar_01.png",
        "selectedIconPath": "images/tap_bar_01_active.png"
      },
      {
        "pagePath": "pages/samplereels/samplereels",
        "text": "classification",
        "iconPath": "images/book1.png",
        "selectedIconPath": "images/book2.png"
      },
      {
        "pagePath": "pages/discover/discover",
        "text": "find",
        "iconPath": "images/tap_bar_02.png",
        "selectedIconPath": "images/tap_bar_02_active.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "Shop",
        "iconPath": "images/tap_bar_03.png",
        "selectedIconPath": "images/tap_bar_03_active.png"
      },
      {
        "pagePath": "pages/person/person",
        "text": "My",
        "iconPath": "images/tap_bar_04.png",
        "selectedIconPath": "images/tap_bar_04_active.png"
      }
    ],
    "position":"bottom"
  }
}

tabBar: set the style properties of the tab navigation bar at the bottom.
color: text when the bottom navigation bar is not selected.
selectedColor: the text when the bottom navigation bar is selected.
backgroundColor: the background color of the bottom navigation bar.
Border style: the color of the border on the bottom navigation bar. Only black/white is supported. The default is black.
position: optional values are bottom and top. The default value is bottom. When it is set to top, icon will not be displayed.
list: array of navigation configuration, at least 2, at most 5.
list array object:
pagePath: page display path
Text: text on navigation
iconPath: icon path, when navigation is not selected
Selected icon path: the path of the selected image

Keywords: JSON

Added by lamia on Thu, 02 Apr 2020 18:22:44 +0300