Implementation code of bottom navigation bar in WeChat applet

The content of this article is about the implementation code of the bottom navigation bar in the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

How to implement the bottom navigation bar? That is, clicking the navigation at the bottom will switch between different corresponding pages.

Let’s first look at the rendering of the bottom navigation bar we want to implement: (three navigation icon examples, WeChat applet can add up to 5)

1. Icon preparation

Alibaba icon library http://www.iconfont.cn/collections/show/29

Download some icons you want to use on this website. For example, some commonly used icons such as personnel avatars and home pages can be directly clicked to download and saved to the local area, and the names can be modified. It is also possible to use UI ready icons.

Go back to the project, create a new images folder, put the icon you just downloaded under the folder for later use, and save the above named icon to the mini program In the newly created images folder in the project directory, the preparations are done.

2. Add configuration file

We find the configuration file app.json in the project root directory and add the following configuration Information (the app.json file is used to globally configure the WeChat applet, determine the path of the page file, window performance, set network timeout, set multiple tabs, etc.)

   "tabBar": {
  "color": "#a9b7b7",
  "selectedColor": "#11cd6e",
  "borderStyle": "white",
  "list": [
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/test/test",
      "text": "测试"
    }
  ]
}

The above is just the basic part. Of course, the official documentation of the mini program provides more rich components and styles
Reference documentation:
https://mp.weixin.qq.com/debug/wxadoc/ dev/framework/config.html#tabBar

OK, end, save and compile to achieve the classic bottom navigation effect of the mini program

============ ===
Appendix: A complete code (negligible)

{
  "pages":[
        "pages/index/index",
        "pages/category/category",
        "pages/topic/topic",        
        "pages/user/user",
        "pages/logs/logs"
  ],
  "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#000",
        "navigationBarTitleText": "WeiCMS",
        "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "color": "#8c8c8c",
    "selectedColor": "#f4645f",
    "backgroundColor": "white",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    }, 
    {
      "pagePath": "pages/category/category",      
      "text": "分类",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    },
    {
      "pagePath": "pages/topic/topic",      
      "text": "话题",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    },
    {
      "pagePath": "pages/user/user",      
      "text": "我的",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    }  
    ],
    "position": "bottom"
  }  
}

Related recommendations:

Illustrated WeChat applet development The use of the middle and bottom navigation bar tabbar

WeChat applet bottom navigation bar development (with code)

The above is the detailed content of Implementation code of bottom navigation bar in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!