前几日使用uniapp框架写项目， 需要自定义vue导航菜单组件，并且完成菜单动态高亮，简而言之，tab组件内完成点哪哪个发生高亮。【相关推荐：《vue.js教程》】
这里需要使用uniapp scroll-view组件，实现导航菜单的横向滑动，这里全部使用的是flex布局。
子组件 tab.vue（自定义导航菜单组件）如下
立即学习“前端免费学习笔记（深入）”；
默认activeIndex的值为0，也就是默认是导航菜单第一项高亮，循环的list数组是从主组件接收的，在子组件中可以使用props接收主组件的值：
tab.vue样式如下：
通用产品企业网站(.NET2.0)1.0
下载
1、系统采用.net2.0开发，数据库access2、三层架构，数据层、逻辑层和表示层分离3、系统完全使用div＋css布局，可以灵活处理界面4、技术特点: 使用模板页，大大减少代码量 动态生成竖向导航菜单 ul li实现表格 各种自定义用户空间 Reapter等数据控件的灵活运用
在主组件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中引入注册全局变量
这样就可以全局使用$myRequest发起网络请求了。
最终实现的效果如图：
相关推荐：最新的5个vue.js视频教程精选2021年最新uni-app视频教程推荐（从入门到精通）
