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

相关推荐
00后程序员张1 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差10 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张12 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬13 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063213 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI14 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_1772972206915 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld15 小时前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄17 小时前
mobx-miniprogram小程序的数据传输
小程序
说私域19 小时前
“开源AI智能名片链动2+1模式S2B2C商城小程序”在直播公屏引流中的应用与效果
人工智能·小程序·开源