uni-app 慕客热搜项目实战（一）tabBar的制作

项目完整效果展示：

在本文中我们要完成的就是底部导航栏 tabBar 的内容

1.  新建uni-app项目：

在模板里选择 uni-ui 项目

2. 在 pages 中新建三个页面对应我们要做的底部tabbar：

 

因为底部有三个选项所以我们要配置三个页面，三个页面都选择 scss 页面

这是对应的 pages 目录：

3. 配置 tabBar 的 pages.json 文件：

先删掉原有的 index 页面的配置，然后在 Pages 同级目录下创建 tabBar，配置方式同微信小程序的配置方式一样。首先我们配置 list，list 对应三个页面，每个页面对应一个内容：

pagePath是页面对应的路径， text 是 tabBar 对应文字，iconPath 是 tabBar 的字体图标路径， selectedIconPath 是选中状态下字体图标的路径

"tabBar": {
		"list": [
			{
				"pagePath": "pages/hot/hot",
				"text": "热搜",
				"iconPath": "static/tab-icons/hot.png",
				"selectedIconPath": "static/tab-icons/hot-active.png"
			},
			{
				"pagePath": "pages/hot-video/hot-video",
				"text": "热播",
				"iconPath": "static/tab-icons/hot-video.png",
				"selectedIconPath": "static/tab-icons/hot-video-active.png"
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的",
				"iconPath": "static/tab-icons/my.png",
				"selectedIconPath": "static/tab-icons/my-active.png"
			},
		]
	}

当用户点击 tabBar 时，产生对应颜色的变化：

这样我们的 tabBar 就配置完成了。

4. 运行到小程序模拟器中查看效果：

 

 

5. 警告与错误处理

我们写完 tabBar 后，小程序工具的控制台会报一堆错误，下面我们就来处理一下：

5.1： 解决 sitemap 索引情况提示的警告问题：

微信小程序默认开启了索引功能，但是因为我们没有配置索引策略，导致出现了这么一个警告的问题，解决这个警告我们只需要关闭默认索引功能即可，双击打开 manifest.json，点击源码试图，添加 checkSiteMap 配置为 false 即可：

5.2：解决 Cannot read property 'forceUpdate' of undefined 的错误：

这个错误源于我们没有为项目配置 appID 的原因，所以只需要在 manifest 中完成 APPID 配置即可