Home  >  Article  >  Web Front-end  >  How to componentize bottom navigation in uniapp

How to componentize bottom navigation in uniapp

coldplay.xixi
coldplay.xixiOriginal
2020-12-09 11:37:573660browse

Uniapp’s method of componentizing the bottom navigation: first create the page in the pages directory; then make the navigation icon; and finally configure the tabBar under the [pages.json] file.

How to componentize bottom navigation in uniapp

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, Dell G3 computer.

Recommended (free): uni-app development tutorial

uniapp components the bottom navigation Method:

tabBar Parameter Description

  • color: Navigation bar font color

  • selectedColor: Selected font Color

  • backgroundColor: bottom background color

  • borderStyle: bottom border color, can only be "black" or "white"

  • list: Object, including the following options

{
pagePath:页面路径
text:底部导航文字
iconPath:没选中前的图标路径
selectedIconPath:选中后的图标路径
}

Step 1: Create a page in the pages directory

How to componentize bottom navigation in uniapp

How to componentize bottom navigation in uniapp

This is the directory and page name created (for reference only)

How to componentize bottom navigation in uniapp

Step 2: Make navigation icons

(1) Open Alibaba vector icon library (Iconfont)

(2) Find the appropriate icon and add it to the shopping cart

(3) Select the appropriate color and format to download

Step 3: Configure tabBar under the pages.json file

{
      "pages":[
            ...
      ],
      "tabBar": {
"color":"#8a8a8a",
"selectedColor":"#00aa00",
"borderStyle":"black",
"backgroundColor":"#ffffff",
"list": [
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"static/home_normal.png",
"selectedIconPath":"static/home.png"
},
{
"pagePath":"pages/search/search",
"text":"发现",
"iconPath":"static/search_normal.png",
"selectedIconPath":"static/search.png"
},
{
"pagePath":"pages/me/me",
"text":"我的",
"iconPath":"static/me_normal.png",
"selectedIconPath":"static/me.png"
}
]
},
      "globalStyle": {
...
}
}

Effect display

How to componentize bottom navigation in uniapp

Related free learning recommendations: Programming Video

The above is the detailed content of How to componentize bottom navigation in uniapp. 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