Uniapp自定义的vue导航菜单组件完成菜单动态高亮

本篇内容主要讲解“Uniapp自定义的vue导航菜单组件完成菜单动态高亮”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Uniapp自定义的vue导航菜单组件完成菜单动态高亮”吧!

站在用户的角度思考问题，与客户深入沟通，找到濮阳网站设计与濮阳网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网络空间、企业邮箱。业务覆盖濮阳地区。

前几日使用Uniapp框架写项目， 需要自定义vue导航菜单组件，并且完成菜单动态高亮，简而言之，tab组件内完成点哪哪个发生高亮。

这里需要使用uniapp scroll-view组件，实现导航菜单的横向滑动，这里全部使用的是flex布局。

子组件 tab.vue（自定义导航菜单组件）如下

默认activeIndex的值为0，也就是默认是导航菜单第一项高亮，循环的list数组是从主组件接收的，在子组件中可以使用props接收主组件的值：

tab.vue样式如下：

在主组件index.vue页面中调用tab.vue组件，并接收子组件派发的tab事件

在getTabList方法中使用的$myRequest是封装的promise网络请求，内容如下：

    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)
			}

		})
	})
}

接着在main.js中引入注册全局变量

到此，相信大家对“Uniapp自定义的vue导航菜单组件完成菜单动态高亮”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！