uniapp中tabBar菜单栏的实现以及页面常用的生命周期（菜单栏颜色切换）

前言

本篇文章带大家使用uniapp通过小案例实现tab菜单栏的切换，并对页面中常用的生命周期进行介绍。

实现菜单栏的切换

配置page页面

我们这里要实现三个页面的切换，所以要先在page.json文件中配置三个页面的路径

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "uni-app"
		}
	},
	{
		"path": "pages/video/video",
		"style": {
			"navigationBarTitleText": "uni-app"
		}
	},
	{
		"path": "pages/mine/mine",
		"style": {
			"navigationBarTitleText": "uni-app"
		}
	}
],

配置tabBar菜单栏

首先我们要在在page.json文件中对tabBar进行配置：
主要的属性及注释如下，对其进行我们想实现效果的设置，在list中配置了三个对象代表三个tab栏，iconPath代表未选择的图片，selectIconPath是选中之后的图片，这里需要在本地有相应的tab图

"tabBar": {
	"color":"#888", // 颜色
	"selectedColor":"#ff2419", // 选中的颜色
	"borderStyle":"white", // 边框颜色
	"backgroundColor":"#f9f9f9", // 背景颜色
	"list": [
		{
			"pagePath":"pages/index/index",
			"iconPath":"static/tab/t_1.png", 
			"selectedIconPath":"static/tab/t_11.png",
			"text":"首页"
		},
		{
			"pagePath":"pages/video/video",
			"iconPath":"static/tab/t_2.png",
			"selectedIconPath":"static/tab/t_21.png",
			"text":"视频"
		},
		{
			"pagePath":"pages/mine/mine",
			"iconPath":"static/tab/t_3.png",
			"selectedIconPath":"static/tab/t_31.png",
			"text":"我的"
		}
	]
}

这样我们就完成了菜单栏的配置，效果如下：

页面常用的生命周期

1. onLoad：监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
2. onShow：监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
3. onHide：监听页面隐藏
   代码示例：

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			console.log("index load")
		},
		onShow() {
			console.log("index show")
		},
		onHide() {
			console.log("index hide")
		}
	}
</script>

index页面打开的时候会执行以生命周期：

切换到其它页面，就会执行index页面的onHide：

最后

本文的分享就到这里啦，本专栏会继续给大家带来uniapp的基础知识，后续也会有项目的实战的内容，感兴趣可以关注一波~