Uniapp custom vue navigation menu component completes menu dynamic highlighting

                                                                                                                                            The Uniapp framework was used to write a project a few days ago. It was necessary to customize the vue navigation menu component and complete the dynamic highlighting of the menu. In short, the highlight occurs when the completion point is clicked in the tab component. [Related recommendation: "vue.js Tutorial"]

Here you need to use the uniapp scroll-view component to realize the horizontal sliding of the navigation menu. All the flex layout is used here.

The sub-component tab.vue (custom navigation menu component) is as follows

The default activeIndex value is 0, which means that the first item of the navigation menu is highlighted by default. The looped list array is received from the main component. Props can be used in the subcomponent to receive the value of the main component. :

The tab.vue style is as follows:

Call the tab.vue component in the main component index.vue page and receive the data sent by the sub-component tab event

The $myRequest used in the getTabList method is an encapsulated promise network request. The content is as follows:

    const BASE_URL = 'http://inews.io/'这里可以换成你后端接口的域名
export const myRequest = (options) => {
	const {
		url,
		method,
		data,
		timeout
	} = options
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + url,
			method: method || 'GET',
			data: data || {},
			timeout:timeout || 3000,
			success: (res) => {
				if (res.statusCode !== 200) {
					uni.showToast({
						title: '请求数据失败',
						duration: 1000,
						icon: 'none'
					});
				}

				resolve(res)
			},
			fail: (err) => {
				uni.showToast({
					title: '请求接口失败',
					duration: 1000,
					icon: 'none'
				});
				reject(err)
			}

		})
	})
}

Then introduce the registered global variable in main.js

In this way, $myRequest can be used globally to initiate network requests.

The final effect is shown in the figure:

Related recommendations:

The latest 5 vue.js video tutorial selection

The latest uni-app video tutorial recommendation in 2021 (from entry to master)

The above is the detailed content of Uniapp custom vue navigation menu component completes menu dynamic highlighting. For more information, please follow other related articles on the PHP Chinese website!