-
问:tabbar是做什么的?
-
答:底部导航
-
问:有哪些部分组成
-
答:
-
"pagePath": "pages/index/index" 页面路径
- "text": "首页" 页面名称
-
"iconPath":"/images/tabbar/home.png" 没有选中时,展示的图片
-
"selectedIconPath":"/images/tabbar/home-active.png" 选中时的图片
如图
-
1. 遇到的第一个问题就是tabbar的设置
文档链接1 uni-app官网https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar
文档链接 2
uni.setTabBarItem(OBJECT) | uni-app官网https://uniapp.dcloud.io/api/ui/tabbar.html
2. 把你需要用到的tabbar的图片放到'“static”文件夹里面
3. 按照文档提示的例子,添加我们自己的tabbar(因为我这里已经有写完的百度小程序tabbar,看了一下代码差不多是一样的,所以就直接复制过来)
图1
代码 (其中的xxx替换成自己的页面文件夹名称和页面名称)
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/images/tabbar/home.png",
"selectedIconPath": "static/images/tabbar/home-active.png"
},
{
"pagePath": "pages/xxx/xxx",
"text": "xxx",
"iconPath": "static/images/tabbar/counrty.png",
"selectedIconPath": "static/images/tabbar/country-active.png"
},
{
"pagePath": "pages/xxx/xxx",
"text": "xxx",
"iconPath": "static/images/tabbar/news.png",
"selectedIconPath": "static/images/tabbar/news-active.png"
},
{
"pagePath": "pages/xxx/xxx",
"text": "xxx",
"iconPath": "static/images/tabbar/ask.png",
"selectedIconPath": "static//images/tabbar/ask-active.png"
},
{
"pagePath": "pages/xxx/xxx",
"text": "xxx",
"iconPath": "static/images/tabbar/me.png",
"selectedIconPath": "static//images/tabbar/me-active.png"
}
],
"backgroundColor": "#ffffff",
"borderStyle": "white",
"color": "#000",
"selectedColor": "#6495ED"
},
这样弄完之后,你的项目就拥有了一个底部导航啦
这里多说一些别的,
- pages是配置页面路径的,一组花括号代表了一个页面的配置
- path 是页面在项目中的路径
- navigationBarTitleText 是页面的标题