Home  >  Article  >  WeChat Applet  >  Development of bottom navigation column of WeChat mini program (with code)

Development of bottom navigation column of WeChat mini program (with code)

高洛峰
高洛峰Original
2017-03-15 16:00:314993browse

This article mainly introduces the relevant information on the development of the Navigation column at the bottom of the WeChat Mini Program (with code). I want to have a beautiful navigation column at the bottom of the WeChat Mini Program, but I don’t know how to make it, so Baidu found this article and shared it with everyone. Friends who need it can refer to it

Development of the navigation column at the bottom of the WeChat applet

Let’s take a look at the renderings first

Development of bottom navigation column of WeChat mini program (with code)

Here, we have added three navigation icons, because we have three pages, and the WeChat applet can add up to 5.

So how do they appear and how are they colored? Done in two steps!

1. Icon preparation

We enter the website, slide the mouse over an icon you like and click the download button

Development of bottom navigation column of WeChat mini program (with code)

Select two icons of different colors in the pop-up box and select the size of 64px. I chose png and then download it and give it an alias

Development of bottom navigation column of WeChat mini program (with code)

Save the above named icon to the newly created images folder in the mini program project directory, Preparation work is done

Development of bottom navigation column of WeChat mini program (with code)

#2. Change the configuration file

We find the configuration file app in the project root directory. json Add the following configuration information

"tabBar": { 
  "color": "#a9b7b7", 
  "selectedColor": "#11cd6e", 
  "borderStyle":"white", 
  "list": [{ 
   "selectedIconPath": "images/111.png", 
   "iconPath": "images/11.png", 
   "pagePath": "pages/index/index", 
   "text": "首页" 
  }, { 
   "selectedIconPath": "images/221.png", 
   "iconPath": "images/22.png", 
   "pagePath": "pages/logs/logs", 
   "text": "日志" 
  }, { 
   "selectedIconPath": "images/331.png", 
   "iconPath": "images/33.png", 
   "pagePath": "pages/test/test", 
   "text": "开心测试" 
  }] 
 },

Explain the corresponding attributeinformation

tabBar refers Bottom navigation configuration properties

color The color of the bottom navigation text when not selected

selectedColor The color of the bottom navigation text when selected

borderStyle The sample color of the bottom navigation border (note here If no style is written, the default light gray line will appear on the upper border of the navigation box)

list Navigation configurationArray

selectedIconPath Icon path when selected

iconPath Icon path when not selected

pagePath Page access address

text Text below the navigation icon

Thank you for reading, I hope it can help everyone, thank you for your support of this site support!


The above is the detailed content of Development of bottom navigation column of WeChat mini program (with code). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn