uni-app 之 tabBar 底部切換按鈕
1693289945724.png
{
"pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：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全局設(shè)置、pages里面是單獨的頁面設(shè)置，如果頁面沒有設(shè)置就統(tǒng)一走全局設(shè)置
"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 紫文章來源：http://www.zghlxwxcb.cn/news/detail-701191.html
// #ffffff 白
// #2c2c2c 黑文章來源地址http://www.zghlxwxcb.cn/news/detail-701191.html
到了這里，關(guān)于uni-app 之 tabBar 底部切換按鈕的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
