当前位置：首页 > news >正文

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

news 2025/7/15 2:17:50

自定义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>