uniapp解决使用uview封装的tabbar卡顿问题

最新推荐文章于 2026-04-06 09:06:59 发布

原创

最新推荐文章于 2026-04-06 09:06:59 发布 · 1.2k 阅读

标签

#uni-app #前端

收录于

一、思路：

参考大佬的思路：【UNIAPP----两种方法解决自定义tabbar，切换无卡顿白屏_uniapp切换页面会白屏一下-CSDN博客】然后我总结了一下思路：都具有相同的大体页面布局，所以将外部布局提取出来形成一个单独的layout.vue组件。其他tabbar页面当成子组件，通过v-if来进行切换。底部tabbar一直在，无论是否有数据，点击不同tabbar，修改不同标题和颜色。

二、代码

封装layout.vue页面，作为子组件引入父组件search.vue页面

layout.vue页面

search.vue页面

<template>
	<view class="search-content">
		<layout-vue>
			<slot>
				<search-vue v-if="activeIndex == 0"></search-vue>
				<sendMsgVue v-if="activeIndex == 1"></sendMsgVue>
				<myS