uni-app底部導航欄

uni-app 的tabbar配置參數地址：

https://uniapp.dcloud.io/collocation/pages?id=tabbar

 

tabBar的配置跟globalStyle同級

1.在pages新建幾個頁面

2.配置tabBar,

color字體顏色

selectedColor選中的字體顏色

backgroundColor底部背景顏色

borderStyle底部的border，只能是「black」 或者 "white"

list  , list是一個對象，包含如下這些選項

pagePath: 頁面路徑

text ：tab的文字

iconPath : 沒選中的圖標路徑

selectedIconPath ：選擇後的圖標路徑。

例子：

page.json的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.圖標製做方法：

（1）打開阿里巴巴圖標庫，登陸，找到對應的圖標

（2）添加到項目，選擇顏色和大小，顏色分別是選中時和未選中時的顏色，大小是80，選擇png下載

4.效果：