The implementation of the tabBar menu bar in uniapp and the common life cycle of the page (menu bar color switching)

foreword

This article takes you to use uniapp to realize the switching of the tab menu bar through a small case, and introduces the life cycle commonly used in the page.

Implement menu bar switching

Configure page page

Here we want to switch between three pages, so we must first configure the paths of the three pages in the page.json file

"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"
		}
	}
],

Configure the tabBar menu bar

First of all, we need to configure the tabBar in the page.json file:
the main attributes and comments are as follows, and we set the effect we want to achieve. Three objects are configured in the list to represent three tab bars, and iconPath represents no selection The picture, selectIconPath is the selected picture, here needs to have the corresponding tab picture locally

"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":"我的"
		}
	]
}

In this way, we have completed the configuration of the menu bar, and the effect is as follows:

Common life cycle of pages

1. onLoad: monitor page loading, its parameter is the data passed on the previous page, and the parameter type is Object (used for page parameter passing)
2. onShow: monitor page display. Triggered every time a page appears on the screen, including returning from a subordinate page to reveal the current page
3. onHide: monitor page hide
   code example:

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

When the index page is opened, it will execute the life cycle:

switch to other pages, and the onHide of the index page will be executed:

at last

This is the end of the sharing of this article. This column will continue to bring you the basic knowledge of uniapp, and there will be actual content of the project in the future. If you are interested, you can pay attention to it~