uni-app配置tabbar

太过爱你忘了你带给我的痛 2021-07-24 23:40 504阅读 0赞

# 一 点睛 #

当设置 position 为 top 时，将不会显示 icon。

tabBar 中的 list 是一个数组，只能配置最少2个，最多5个 tab ，tab 按数组的顺序排序。

# 二 代码 #

## 1 配置 pages.json ##

{
        "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
            {
                "path": "pages/message/message",
                "style":{
                    "navigationBarTitleText":"信息页",
                    "navigationBarBackgroundColor":"#007AFF",
                    "h5":{
                        "pullToRefresh":{
                            "color":"#7D26CD"
                        }
                    }
                }
            },
            {
                "path": "pages/index/index"
            },
            {
                "path": "pages/contact/contact"
            }
        ],
        "globalStyle": {
            "navigationBarTextStyle": "white",
            "navigationBarTitleText": "绿帽子",
            "navigationBarBackgroundColor": "#7FFF00",
            "backgroundColor": "#7CCD7C",
            "enablePullDownRefresh": true,
            "backgroundTextStyle":"light"
        },
        "tabBar":{
            "color":"#F0AD4E",
            "selectedColor":"#4CD964",
            "backgroundColor":"#007AFF",
            "borderStyle":"black",
            "list":[
                {
                    "text":"首页",
                    "pagePath":"pages/index/index",
                    "iconPath":"static/tabs/1237644.png",
                    "selectedIconPath":"static/tabs/1237719.png"
                },
                {
                    "text":"信息页",
                    "pagePath":"pages/message/message",
                    "iconPath":"static/tabs/1246271.png",
                    "selectedIconPath":"static/tabs/1262419.png"
                },
                {
                    "text":"我们",
                    "pagePath":"pages/contact/contact",
                    "iconPath":"static/tabs/1262419.png",
                    "selectedIconPath":"static/tabs/1289167.png"
                }
            ]
        }
    }

## 2 新建 contact.vue ##

# 三 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/ecb0c9f923e646aca4757ee037bb87c9.png