微信小程序自定义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组件又再一次加载了对应的资源,而资源加载耗费一定的时间,从而产生啦闪动效果;

相关推荐
毛毛三由10 小时前
【uniapp】微信小程序修改按钮样式
微信小程序·小程序·uni-app
qtkj669910 小时前
上门养老小程序源码 uniapp PHP MySQL
小程序·宠物
三翼鸟数字化技术团队11 小时前
本地开发环境获取远程App端环境-研发提效小技巧
websocket·微信小程序
知识分享小能手14 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
不太会写17 小时前
又开始了 小程序定制
vue.js·spring boot·python·小程序
说私域17 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的互联网运营体系化研究
人工智能·小程序
2501_9160074718 小时前
iOS 26 软件性能测试 新版系统下评估全流程 + 多工具辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张18 小时前
Swoole HTTPS 实战,在生产环境部署、性能权衡与排查流程
后端·ios·小程序·https·uni-app·iphone·swoole
從南走到北19 小时前
智尚房产中介小程序
微信小程序·小程序
LawsonJin21 小时前
springboot实现微信小程序支付(服务商和普通商户模式)
spring boot·后端·微信小程序