微信小程序自定义tabbar,页面切换存在闪动【解决方案】

需求:

自定义tabbar,在需要的几个主页面都加入这么一个组件,但是有个情况;而组件中使用照片(svg或png)和文字;在切换tabbar的时候,跳转相应的页面,运行到真机或是模拟器,会存在图片闪动,而文字不会闪动;并且tabbar的图标颜色可以自定义。

图标颜色+tabbar切换不闪动

解决方案一:使用svg 转为base64,在更改颜色

代码块如下 https://developers.weixin.qq.com/s/GrQhtZmg7yCJ

代码如下 svg是组件,参考上方的代码块

html 复制代码
<van-tabbar-item name="raceHome">
        <svg slot="icon-active" color="{{raceColor}}" src="/images/icon-home-active.svg" width="{{iconW}}px" height="{{iconW}}px" />
        <svg slot="icon" color="#000" src="/images/icon-home-inactive.svg" width="{{iconW}}px" height="{{iconW}}px" />
        首页
    </van-tabbar-item>

但是tabbar切换还是存在闪动

解决方案二:使用iconfont 字体图标【推荐】

微信小程序引入iconfont

代码如下:

html 复制代码
<van-tabbar-item name="raceHome">
        <text slot="icon-active"  class="iconfont icon-home-active tab-text" style="color:{{raceColor}};"></text>
        <text slot="icon"  class="iconfont icon-home-inactive tab-text"  ></text>
        首页
    </van-tabbar-item>

测试完之后,虽然有小闪动,整体效果 可以打70分

方案三:就是将这几个页面封装为组件,在一个页面进行交互;目前没有这样处理

分析,使用照片和svg为啥会有闪动呢?主要是在切换到下一个页面的时候,tabbar组件又再一次加载了对应的资源,而资源加载耗费一定的时间,从而产生啦闪动效果;

相关推荐
毕设源码-赖学姐15 小时前
【开题答辩全过程】以 “饭否”食材搭配指南小程序的设计与实现为例,包含答辩的问题和答案
小程序
nodcloud16 小时前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
老华带你飞1 天前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
老华带你飞1 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗1 天前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张2 天前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师2 天前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序
编程迪2 天前
基于Java+Vue开发的家政服务系统源码适配H5小程序APP
小程序·家政小程序·家政系统源码·家政系统·家政源码
拼图2092 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
fakaifa2 天前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版