uni-app底部导航栏设置
【uni-app底部导航栏设置】一、新建需要的页面
文章图片
二、在pages.json文件里面配置文件页面路由
文章图片
三、设置底部导航栏
文章图片
代码：
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index"
},
{
"path": "pages/news/index"
},
{
"path": "pages/my/index"
}
],
"globalStyle": {
"navigationStyle": "custom"
},
"tabBar":{
"color":"#333",
"selectedColor":"deepskyblue",
"backgroundColor":"#eee",
"borderStyle":"black",
"list":[
{
"pagePath":"pages/index/index",
"text":"精彩视频",
"iconPath":"static/icon_jingcai01.png",
"selectedIconPath":"static/icon_jingcai@2x.png"
},
{
"pagePath":"pages/news/index",
"text":"原始视频",
"iconPath":"static/icon_yuanshi01@2x.png",
"selectedIconPath":"static/icon_yuanshi@2x.png"
},
{
"pagePath":"pages/my/index",
"text":"个人中心",
"iconPath":"static/icon_gerenzhongx01@2x.png",
"selectedIconPath":"static/icon_gerenzhongx@2x.png"
}
]
}
}推荐阅读
- uniapp|uniapp 自定义底部导航栏
- 微信小程序底部导航栏实现
- uni-app|uniapp二维码识别
- ReactNative之自定义导航条
- 微信小程序-底部导航tabbar
- uni-app开发经验分享- 路由、通信、开发中遇到的问题
- 亚马逊卖家导航旺季篇（4大招应对亚马逊旺季突发状况）
- 如何在uni-app使用iconfont字图标
- 关于导航栏渐变效果总结
- 微信小程序|基于uni-app实现微信小程序一键登录和退出登录功能