Uniapp自定義的vue導(dǎo)航菜單組件完成菜單動(dòng)態(tài)高亮

本篇內(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)高亮”吧!

前幾日使用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接收主組件的值：

    <script>
	export default {
		name: "tab",
		data() {
			return {
				 activeIndex:0
			};
		},
		// 組件實(shí)例的作用域是孤立的。這意味著不能（也不應(yīng)該）在子組件的模板中直接飲用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，需要通過子組件的 props 選項(xiàng)。子組件要顯示的用 props 聲明它期望獲得的數(shù)據(jù)
		// 借助watch可以監(jiān)聽data或者 props 值的變化
		watch:{
			tabIndex(newVal,oldVal)
			{
				// console.log(newVal,oldVal);
				this.activeIndex = newVal
			}
		},
		//接收來自主組件的值 list  
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			} 

		},
		methods:{
			clickTab(item,index)
			{
				// console.log(item,index);
				this.activeIndex = index
				// tab是自定義事件名 派發(fā)給組件的調(diào)用者 index.vue
				this.$emit("tab",{
					data:item,
					index:index
				})
			}
		}
	}
</script>

tab.vue樣式如下：

    <style>
    .tab{
        display: flex;
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
        .tab-srcoll{
        display: flex;
        overflow: hidden;
        box-sizing: border-box;
            .tab-srcoll-box{
                display: flex;
                height: 45px;
                align-items: center;
                flex-wrap: nowrap;
                box-sizing: border-box;
                .tab-srcoll-item{
                    color: #333;
                    flex-shrink: 0;
                    font-size: 14px;
                    padding: 0 10px;
                    &.active{
                        color: $chloe-base-color;
                    }
                }
            
            }
        }
    }
</style>

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

    <template>
	<view class="home">
		<tab :list="list" @tab="tab" ></tab>
	</view>
    </template>

    <script>
	export default {
		data() {
			return {
				list: [],
				activeIndex:0
			};
		},
		onLoad() {
			this.getTabList()
			 
		},
		onShow(){
			
		},
		methods: {
			tab({
				data,
				index
			}) {
				// console.log(data.catname,index);
				this.activeIndex = index
			},
			
			async getTabList() {
				const res = await this.$myRequest({
					url: 'tab'
				})
				const {
					data
				} = res
				this.list = data
			} 

		}
	}
</script>

在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í)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！