uniapp 动态组件实现Tabs标签切换组件

痛定思痛。 2024-04-22 15:07 83阅读 0赞

## 功能描述 ##

> 拿**喜马拉雅app**作为案例，它的tabs标签有很多，如：推荐、小说、儿童等等。用户点击小说就会切换到小说组件，如果仔细看第一次是有一个加载的过程，如果你再返回到推荐页，再次点击小说时就没有加载过程，而是直接显示出来。
> 
>   
> 这就有两个知识点  
> （1）动态组件切换 （vue3 中 component组件 is属性）
> 
> （2）保持组件被移除时的状态（vue3 中是 KeepAlive）

![28ef78654f7d47f09f750e19ecab0569.jpeg][]

## 二、在uniapp中实现动态组件切换需看uniapp是否支持 ##

从官方文档看到，component是支持 App 和 H5的（我实在app上实现的），而keepAlive只支持H5

<template>
        
        <u-tabs class="tabsBox" 
    			:list="tabData" @click="changeTab" :scrollable="false" 
    			lineColor="#000"
    			:activeStyle="{color: '#000',fontWeight: 'bold',transform: 'scale(1.05)'}" 
    			:inactiveStyle="{color: '#000'}"
    	></u-tabs>
        
        
    	<component :is="tabData[current].comName"></component>
    </template>
    
    
    <script setup>
    	import {ref,reactive,onMounted,markRaw} from 'vue';
        import A from "./a.vue";
        import B from "./b.vue";
        import C from "./c.vue";
        let tabData = reactive([
    		{name: '体育',comName:markRaw(A)},
    		{name: '经济',comName:markRaw(B)},
    		{name: 'IT信息',comName:markRaw(C)}
    	]);
    
    
        //切换标签事件
    	let current = ref(0);
    	const changeTab = (obj)=>{
    		current.value = obj.index;
    	}
    </script>

**解释一下：**

（1）u-tabs 是 uview-plus 里面的标签组件

（2）markRaw 将一个对象标记为不可被转为代理。返回该对象本身，不然用响应式的ref 会报出警告

关于如何保持组件被移除时的状态，我也在寻找方案

[28ef78654f7d47f09f750e19ecab0569.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/2511237ee8c34106a36ec73edf694238.jpeg