自定义tabbar跳转防止页面抖动(uniapp案例,也适用所有前端项目)

自定义tabbar思路就是自己写个tabbar组件引入到tabbar页面内,使每个页面显示也会有这个组件显示,但是这样的话,每次点击由于tabbar是作为页面组件使用的,会跟着组件的渲染和销毁一起执行,导致每次页面显示就会有抖动效果,解决方式为:做一个主页面,将tabbar页面引入进去,同时把该tabbar对应的页面也引入进去,这样的话只需要一个页面执行显示和隐藏就行了,也不会导致tabbar组件老是重复显示和隐藏了,具体实现方法如下

编写一个tabbar组件

我在/wxcomponents/tabbar/index.vue下面绘制tabbar组件,内容如下:

这里我tabbar的图标使用了阿里巴巴矢量图标的base64编码,有想要了解的点击可以参考我这篇文章

阿里巴巴矢量图标的font.css配置如下(如果tabbar图标是图片的话可以省略这一步,只是我项目用的是阿里巴巴图标的,不是图片):

@font-face {
	font-family: 'iconfont';
	/* Project id 4663953 */
	src: url('//at.alicdn.com/t/c/font_4663953_oa7tsq0eoq.woff2?t=1724567838049') format('woff2'),
		url('//at.alicdn.com/t/c/font_4663953_oa7tsq0eoq.woff?t=1724567838049') format('woff'),
		url('//at.alicdn.com/t/c/font_4663953_oa7tsq0eoq.ttf?t=1724567838049') format('truetype');
}

.iconfont-themeColor {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #F9BE3E
}

.iconfont-noColor {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color:#8a8a8a
}

tabbar组件内容如下

<template>
	<view class="tabbarContainer">
		<view class="home" @click="navigatePage('home')">
			<span :class="pagename=='home'?'iconfont-themeColor':'iconfont-noColor'">&#xe60f;</span>
			<text>首页</text>
		</view>
		<view class="order" @click="navigatePage('order')">
			<span :class="pagename=='order'?'iconfont-themeColor':'iconfont-noColor'">&#xe62c;</span>
			<text>点餐</text>
		</view>
		<view class="mycenter" @click="navigatePage('mycenter')">
			<span :class="pagename=='mycenter'?'iconfont-themeColor':'iconfont-noColor'">&#xe60e;</span>
			<text>个人中心</text>
		</view>
	</view>
</template>

<script setup>
	import {
		defineEmits,
		defineProps
	} from 'vue';
	const props = defineProps(['pagename']) // 这里接收的是父组件向子组件发送的数据
	
	const emits = defineEmits(['changePage']) // 这里接收的是子组件向父组件发送的事件
	// 点击某个图标显示不一样的页面只需要给父组件修改下name值就行
	const navigatePage = (pagename) => {
		emits('changePage', pagename)
	}
</script>

<style scoped lang="scss">
	.tabbarContainer {
		width: 750upx;
		height: 168upx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;

		.home,
		.order,
		.mycenter {
			flex: 1;
			height: 118upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
</style>

在主页面pages/index/index.vue加入以下代码:

<template>
	<view>
		<!-- 根据不一样的name显示不一样的页面 -->
		<home v-if="name=='home'"></home>
		<order v-if="name=='order'"></order>
		<mycenter v-if="name=='mycenter'"></mycenter>
		<!-- 根据pagename判断当前是哪个页面,然后高亮当前页面图标 -->
		<tabbar :pagename="name" @changePage="changePage"></tabbar>
	</view>
</template>

<script setup>
	import tabbar from '/wxcomponents/tabbar/index.vue'  // tabbar组件
	import Home from '/pages/tabbar/home.vue'  // home页面(tabbar页面)
	import Mycenter from '/pages/tabbar/mycenter.vue' // Mycenter页面(tabbar页面)
	import Order from '/pages/tabbar/order.vue' // Order页面(tabbar页面)
	import {
		ref
	} from 'vue';
	const name = ref('home') // 默认显示home页面
	
   // 点击切换时修改name的值,从而实现上面的tabbar页面的显示和隐藏
	const changePage = (e) => {
		name.value = e
	}
</script>

<style>
</style>