uni-app navigation bar at the bottom

1. In the pages of several new page

2. Configure tabBar,

color font color

selectedColor selected font color

Bottom background color backgroundColor

border bottom borderStyle, only "black" or "white"

list, list is an object that contains these options

pagePath: Page path

text: tab text

iconPath: Icon Path is not selected

selectedIconPath: path after selecting the icon.

example:

page.json configuration of tabBar

    "tabBar":{
        "color":"#333",
        "selectedColor":"deepskyblue",
        "backgroundColor":"#eee",
        "borderStyle":"black",
        "list":[
            {
                "pagePath":"pages/index/index",
                "text":"首页",
                "iconPath":"./static/tabbar/index.png",
                "selectedIconPath":"static/tabbar/indexed.png"
            },
            {
                "pagePath":"pages/news/news",
                "text":"动态",
                "iconPath":"static/tabbar/news.png",
                "selectedIconPath":"static/tabbar/newsed.png"
            },
            {
                "pagePath":"pages/paper/paper",
                "text":"小纸条",
                "iconPath":"static/tabbar/paper.png",
                "selectedIconPath":"static/tabbar/papered.png"
            },
            {
                "pagePath":"pages/my/my",
                "text":"我的",
                "iconPath":"static/tabbar/my.png",
                "selectedIconPath":"static/tabbar/myed.png"
            }
        ]
    }

 

3. Icon Production Method:

(1) Open Alibaba icon library, log in, find the corresponding icon

(2) to the project, choose the color and size, color are the color at the time of checked and unchecked, size 80, select png download

4. Effects: