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

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

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

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

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

子组件 tab.vue(自定义导航菜单组件)如下

Uniapp自定义的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导航菜单组件完成菜单动态高亮”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


标题名称:Uniapp自定义的vue导航菜单组件完成菜单动态高亮
网页URL:http://pwwzsj.com/article/jghhid.html