小程序底部导航栏

Posted Sun_Song

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序底部导航栏相关的知识,希望对你有一定的参考价值。

在app.json文件中添加如下代码:

"tabBar": {
"color": "black",
"backgroundColor":"#fff",
"selectedColor": "#11cd6e",
"borderStyle":"white",
"list": [{
"selectedIconPath": "image/home_HL.png",
"iconPath": "image/home.png",
"pagePath": "pages/index/index",
"text": "首页"
}, {
"selectedIconPath": "image/1168874.png",
"iconPath": "image/dingdan.png",
"pagePath": "pages/logs/logs",
"text": "订单"
}, {
"selectedIconPath": "image/508421.png",
"iconPath": "image/508417.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}]
}

//selectedIconPath:选中时的图片样式

iconPath没选中时的图片

pagePath:跳转的页面链接

backgroundColor:选中时字的颜色






















以上是关于小程序底部导航栏的主要内容,如果未能解决你的问题,请参考以下文章

请问微信小程序跳转页面就没有底部导航栏怎么办?

react 自定义底部导航栏 Tabbar

uni-app 自定义组件ADTabBar 底部导航栏 支持中间自定义按钮 支持小程序

小程序动态加载底部导航(根据不同角色展示不同导航栏)

微信小程序开发,导航栏右边的按钮怎么设置

小程序底部导航栏