本篇內(nèi)容主要講解“Uniapp自定義的vue導(dǎo)航菜單組件完成菜單動(dòng)態(tài)高亮”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Uniapp自定義的vue導(dǎo)航菜單組件完成菜單動(dòng)態(tài)高亮”吧!

站在用戶的角度思考問題，與客戶深入溝通，找到濮陽網(wǎng)站設(shè)計(jì)與濮陽網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國(guó)際域名空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋濮陽地區(qū)。

前幾日使用Uniapp框架寫項(xiàng)目， 需要自定義vue導(dǎo)航菜單組件，并且完成菜單動(dòng)態(tài)高亮，簡(jiǎn)而言之，tab組件內(nèi)完成點(diǎn)哪哪個(gè)發(fā)生高亮。

這里需要使用uniapp scroll-view組件，實(shí)現(xiàn)導(dǎo)航菜單的橫向滑動(dòng)，這里全部使用的是flex布局。

子組件 tab.vue（自定義導(dǎo)航菜單組件）如下

默認(rèn)activeIndex的值為0，也就是默認(rèn)是導(dǎo)航菜單第一項(xiàng)高亮，循環(huán)的list數(shù)組是從主組件接收的，在子組件中可以使用props接收主組件的值：

tab.vue樣式如下：

在主組件index.vue頁面中調(diào)用tab.vue組件，并接收子組件派發(fā)的tab事件

在getTabList方法中使用的$myRequest是封裝的promise網(wǎng)絡(luò)請(qǐng)求，內(nèi)容如下：

    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: '請(qǐng)求數(shù)據(jù)失敗',
						duration: 1000,
						icon: 'none'
					});
				}

				resolve(res)
			},
			fail: (err) => {
				uni.showToast({
					title: '請(qǐng)求接口失敗',
					duration: 1000,
					icon: 'none'
				});
				reject(err)
			}

		})
	})
}

接著在main.js中引入注冊(cè)全局變量

到此，相信大家對(duì)“Uniapp自定義的vue導(dǎo)航菜單組件完成菜單動(dòng)態(tài)高亮”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！