本篇内容主要讲解“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导航菜单组件完成菜单动态高亮”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
文章名称：Uniapp自定义的vue导航菜单组件完成菜单动态高亮
链接分享：
http://cdxtjz.cn/article/jghhid.html
