WeChat applet setting bottom navigation bar

1 Introduction

Let's first look at the renderings:

Notice:

• The maximum number of navigation bars is 5, and the minimum is two.

2. Icon preparation

Ali icon library http://www.iconfont.cn/collections/show/29
We enter the website, select the icon we need, click the download button below, such as the home page, and download the corresponding png file.

3. Small program tabbar settings

pages.jsonConfigure the following code in the file :

{
    
    
  "easycom": {
    
    
    "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
  },
  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
    
    
      "path": "pages/home/home",
      "style": {
    
    
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": false
      }
    },
    {
    
    
      "path": "pages/monitor/monitor",
      "style": {
    
    
        "navigationBarTitleText": "监控",
        "enablePullDownRefresh": false
      }
    },
    {
    
    
      "path": "pages/alarm/alarm",
      "style": {
    
    
        "navigationBarTitleText": "告警",
        "enablePullDownRefresh": false
      }
    },
    {
    
    
      "path": "pages/user/user",
      "style": {
    
    
        "navigationBarTitleText": "",
        "navigationStyle": "custom"
      }
    }
  ],
 "tabBar": {
    
    
    "color": "#000000",
    "selectedColor": "#1296db",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
    
    
        "pagePath": "pages/home/home",
        "iconPath": "static/img/tabbar/home.png",
        "selectedIconPath": "static/img/tabbar/home_active.png",
        "text": "首页"
      },
      {
    
    
        "pagePath": "pages/monitor/monitor",
        "iconPath": "static/img/tabbar/monitor.png",
        "selectedIconPath": "static/img/tabbar/monitor_active.png",
        "text": "监控"
      },
      {
    
    
        "pagePath": "pages/alarm/alarm",
        "iconPath": "static/img/tabbar/alarm.png",
        "selectedIconPath": "static/img/tabbar/alarm_active.png",
        "text": "告警"
      },
      {
    
    
        "pagePath": "pages/user/user",
        "iconPath": "static/img/tabbar/my.png",
        "selectedIconPath": "static/img/tabbar/my_active.png",
        "text": "我的"
      }
    ]
  },

  "globalStyle": {
    
    
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }

Tabbar parameter explanation:

parameter	explain
color	The color of the bottom navigation text when not selected
selectedColor	Set the color of the selected text
borderStyle	The sample color of the bottom navigation border (note that if there is no style written here, the default light gray line will appear on the top border of the navigation box)
backgroundColor	Navigation bar background color
list	Navigation configuration array
pagePath	page access address
iconPath	navigation icon
selectedIconPath	Navigation icon in selected state
text	navigation text