uni-app 之 tabBar 底部切换按钮

亦凉 2023-10-15 15:58 49阅读 0赞

![format_png][]

1693289945724.png

{
        "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
            {
                "path": "pages/home/home",
                "style": {
                    "navigationBarTitleText": "首页1",
                    "enablePullDownRefresh": false
                }
            }, {
                "path": "pages/list/list",
                "style": {
                    "navigationBarTitleText": "",
                    "enablePullDownRefresh": false
                }
            }
        ],
        "globalStyle": {
            // globalStyle全局设置、pages里面是单独的页面设置，如果页面没有设置就统一走全局设置
            "navigationBarTextStyle": "black",
            "navigationBarTitleText": "uni-app",
            "navigationBarBackgroundColor": "#F8F8F8",
            "backgroundColor": "#F8F8F8"
        },
        "uniIdRouter": {},
        // 底部切换按钮，核心代码其实就是下面的 "tabBar": { } 这一块，注意图片等资源一定要放在static文件夹下，否则会异常不展示
        "tabBar": {
            "selectedColor": "#1296db",
            "color": "#2c2c2c",
            "list": [{
                    "text": "首頁",
                    "pagePath": "pages/home/home",
                    "selectedIconPath": "static/img/tabbar_home1.png",
                    "iconPath": "static/img/tabbar_home2.png"
                },
                {
                    "text": "列表",
                    "pagePath": "pages/list/list",
                    "selectedIconPath": "static/img/tabbar_ml1.png",
                    "iconPath": "static/img/tabbar_ml2.png"
                }
            ]
        }
    }

// 常用颜色  
// d81e06 紅  
// \#f4ea2a 黃  
// \#1afa29 綠  
// \#1296db 藍  
// \#13227a 青  
// \#d4237a 紫

// \#ffffff 白  
// \#2c2c2c 黑

[format_png]: https://img-blog.csdnimg.cn/img_convert/5e9d623582576a772a93cb8a1897d187.webp?x-oss-process=image/format,png