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

相关推荐
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang12 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金14 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq14 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷14 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯14 小时前
小程序自定义组件学习笔记
微信小程序
阿眠16 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184119 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
xmdoor21 小时前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
大锦终1 天前
【Linux】第一个小程序—进度条
linux·运维·服务器·小程序