uni-app 之 tabBar 底部切换按钮-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app 之 tabBar 底部切换按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uni-app 之 tabBar 底部切换按钮

uni-app 之 tabBar 底部切换按钮,uni-app,windows,服务器,linux

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 黑文章来源地址https://www.toymoban.com/news/detail-701191.html

到了这里，关于uni-app 之 tabBar 底部切换按钮的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！