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

最新推荐文章于 2025-07-03 10:53:24 发布

原创最新推荐文章于 2025-07-03 10:53:24 发布 · 6.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uniapp 专栏收录该内容

36 篇文章

订阅专栏

文章介绍了如何在基于Vue3的uniapp应用中实现动态组件切换，以喜马拉雅APP的tabs功能为例，提到了使用component的is属性和KeepAlive组件来实现。尽管KeepAlive在uniapp中仅支持H5，但作者在尝试解决在APP中保持组件状态的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能描述

拿喜马拉雅app作为案例，它的tabs标签有很多，如：推荐、小说、儿童等等。用户点击小说就会切换到小说组件，如果仔细看第一次是有一个加载的过程，如果你再返回到推荐页，再次点击小说时就没有加载过程，而是直接显示出来。

这就有两个知识点
（1）动态组件切换（vue3 中 component组件 is属性）

（2）保持组件被移除时的状态（vue3 中是 KeepAlive）

二、在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 会报出警告

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