tabbar的设置

• 问：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  是页面的标题