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

本文主要是介绍自定义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