关于小程序点击按钮在两张图切换时闪屏问题

最新推荐文章于 2024-04-09 11:42:59 发布
最新推荐文章于 2024-04-09 11:42:59 发布
阅读量1.7k 收藏 1
点赞数 3
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c327127960/article/details/110638510
版权

最近做的项目中,有一个页面是 需要你点击按钮之后完成一人人物推杠铃的全过程,完整过程如图
1.
在这里插入图片描述
2.
在这里插入图片描述
3. 在这里插入图片描述

就是说,未点击时是第一张图片,点击之后先是第二张,然后立马复原成第一张,其实思路很简单,就是通过js显示隐藏图片而已,我一开始用的方法是wx:if和wx:else,代码如图
在这里插入图片描述
在这里插入图片描述
可以实现效果,但是每次推举的过程中,都会闪烁一下,我一开始还以为是图片没有加载完成的原因,后来用了wx.getimageinfo也没用,查了很多资料也都是没用的,他们说的大多是问题是图片没加载的情况下会有闪烁,但我这个已经加载完毕了,还是会闪烁,后来我就想到,我这种方法是在两张image标签来回切换,相当于每次点击都是重新换了一个image标签,所以我就试了一下在一个image标签中通过三元表达式的方法切换src属性代码如下在这里插入图片描述
js代码不变,成功,切换图片不闪烁了

鸡汤辉
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 8.0系统界面切换时闪屏问题
12-12
Android 8.0系统界面切换时闪屏问题
快速解决css使用@keyframes加载图片首次循环时出现白色间隙问题(闪屏)
12-28
在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题 问题演示   //html <div class=first> //less .container { width: 100vw; ...
微信小程序image组件频闪问题
一出好剧
06-20 4910
解决微信小程序image组件mode=aspectFill造成的页面频闪问题
uniapp-微信小程序 图片加载时闪烁的问题
qq_43799363的博客
01-23 1106
处理 uniapp-微信小程序 图片加载时闪烁的问题
uniapp , 微信小程序 图片加载时闪烁
偏执的小男孩儿
09-05 685
uniapp , 微信小程序 图片加载时闪烁
解决js切换图片闪屏问题
恒二哥的博客
11-15 3392
主要原因：图片没有加载完全，然后调用了图片的动态效果，造成有闪屏的现象出现。 解决方法：先创建一个Image对象，然后优先加载图片，等加载完成，然后调用onload函数加载图片动态效果； 仅展示部分关键代码： var $picture = $("<div id='picture0' style='display: block;background-image: url(static/image/test0.png)' //设置等待函数(可以不用等待函数)，图片0展示0.8s后展示图片1的效果 s
自定义一个微信小程序tabBar，切换不闪烁，逻辑简单
Jacky_kplin的博客
02-15 5863
自定义微信小程序tabBar，切换效果不会闪烁，逻辑上简单易懂，适合新手。 微信小程序官方有提供了一个tabBar，实现底部导航栏的功能，虽然简单易用，但无奈限制条件有点多，不适合很多情况。 本来打算参考网友的写法实现自定义tabBar，但搜索了一下，有的虽然实现了，但切换的时候会有闪烁的效果，体验不佳。有的可以做到切换不闪烁，但是逻辑上稍微有点复杂。（也许是我懒得搜索更多，所以自己琢磨了一下，写...
使用video标签，连续播放无限个mp4(h264封装的)视频时，画面会闪烁的问题解决
wflsyf的博客
10-08 2267
采用的预加载方法，使用两个video标签加一个js中的Array（存储还没播放的视频。） html页面代码，除了下面的div之外，还需导入一个jquery的库我导的jquery-3.4.1.js这个。 <div> <video id="devVideo0" muted="muted">浏览器不支持 video0 标签</video> <video id="devVideo1" muted="muted">浏
Android切换至SurfaceView时闪屏（黑屏闪一下）以及黑屏移动问题的解决方法
08-31
然而，使用SurfaceView时可能会遇到一些问题，比如在切换到SurfaceView时出现短暂的黑屏闪屏现象，或者在使用ViewPager进行页面滑动时SurfaceView出现黑屏移动问题。以下是对这两个问题的详细解释和解决方案： 1. *...
29.如何在对话框程序中加入闪屏？（Visual C++编程 源代码）
06-28
29.如何在对话框程序中加入闪屏？（Visual C++编程 源代码）29.如何在对话框程序中加入闪屏？（Visual C++编程 源代码）29.如何在对话框程序中加入闪屏？（Visual C++编程 源代码）29.如何在对话框程序中加入闪屏？...
C# 多文档程序 子窗体间切换时闪屏的解决
06-15
然而，在子窗体之间进行切换时，有时可能会遇到“闪屏”问题，即窗口在切换过程中短暂地闪烁或跳动，这给用户带来了不愉快的体验。本篇将深入探讨如何解决这个问题。 首先，闪屏现象通常是由于窗口重绘过程中的不...
uni-app——解决image “闪烁” 问题
qq_43201350的博客
02-05 3435
1、官方文档 Image uni-app官方文档 如在公共的css文件中加入 image{ will-change: transform }
解决uniapp微信小程序v-if（v-else）闪屏现象
xbcmfy99的博客
06-07 4415
在页面中使用 v-if 和 v-else 来根据数据的total来判断是渲染数据还是显示暂无，首先，在data中声明一个对象（如：tag）值为0，在获取完数据的时候设置（tag）值等于1，然后在页面中把（tag）值也加入判断条件中（如：v-if="tag === 1 && total > 0"），最后 v-else 就不要用了，替换成 v-if（判断 tag 和 原本的判断内容）...
微信小程序实现左右滑动进行切换数据页面（touchmove）
共同进步
06-27 7950
touchstart touchmove 微信小程序实现左右滑动进行切换数据页面 手指触摸左右滑动进行切换数据需要实现的是有一个tab栏,点选某一个tab的时候切换页面，手势滑动，左滑右滑效果和点击tab一样切换页面数据。
微信小程序加载图片闪烁bug解决方案（亲测有效）
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
12-18 8716
小程序图片闪烁是因为图片没有高度，加载时从第最高高度变到最适合高度的过程，解决方案有三种，我是使用的第一种 第一种 image{height:auto} //全局设置图片自适应，完美解决 第二种 未解决我当前的问题 让图片显示完在触发的事件bindload //wxml <image style="height:{{Flag?null:imageheight}}rpx;" bindload="showload"></image> //js showload(res.
解决 wx:if 引起的 先显示后隐藏的问题（内容闪烁问题）
qq_44441669的博客
11-09 1495
解决方案：先用一个变量让其隐藏，当从接口中获得数据的时候，在把这个 show 设置成 true 。这样出来的效果就是，内容逐渐在显示，依次显示。从而看不到闪烁再隐藏。 代码如下： <view class='box' bindtap="previewImage" wx:if="{{show && !orderInfo.deposit}}"> data: { s...
微信小程序自定义tabbar,页面切换存在闪动【解决方案】
最新发布
weixin_41104307的博客
04-09 1785
自定义tabbar，在需要的几个主页面都加入这么一个组件，但是有个情况；在切换tabbar的时候，跳转相应的页面，运行到真机或是模拟器，会存在图片闪动，而文字不会闪动；并且tabbar的图标颜色可以自定义。分析，使用照片和svg为啥会有闪动呢？主要是在切换到下一个页面的时候，tabbar组件又再一次加载了对应的资源，而资源加载耗费一定的时间，从而产生啦闪动效果；测试完之后，虽然有小闪动，整体效果 可以打70分。代码如下 svg是组件，参考上方的代码块。但是tabbar切换还是存在闪动。
解决微信小程序自定义tabbar跳转页面图标闪动问题
蜗牛~~
10-13 3236
解决微信小程序自定义tabbar跳转页面图标闪动问题
在uniapp小程序中，如何解决首次加载渲染闪屏的问题
06-06
在uniapp小程序中，如果页面加载过程中涉及到较多的网络请求或者计算，可能会导致页面首次加载时出现短暂的白屏或者闪屏现象，给用户带来不好的体验。为了解决这个问题，可以采用以下几种方式： 1. 使用uniapp提供的页面预加载功能，将需要的资源在进入页面前提前加载，这样可以有效减少页面加载时间，避免闪屏现象。具体可以参考uniapp官网文档中的“预加载页面”部分。 2. 在uniapp中可以通过设置页面背景色来避免闪屏现象。在App.vue中使用uni页面生命周期函数onLaunch时设置页面背景色，例如： ```javascript onLaunch: function() { uni.setBackgroundColor({ backgroundColor: '#f5f5f5', backgroundColorTop: '#f5f5f5', backgroundColorBottom: '#f5f5f5' }) } ``` 这样，在页面加载过程中，即使还没有渲染出内容，页面的背景色也能够填充屏幕，避免出现闪屏现象。 3. 将页面按照功能模块进行拆分，使用uniapp提供的分包功能，将不同的功能模块打包成不同的子包，在需要使用功能模块时再进行加载，这样可以有效减少首次加载时间，避免闪屏现象。 4. 对于一些比较耗时的计算和网络请求，可以使用uniapp提供的异步加载方法，将这些操作放到异步任务中执行，避免阻塞页面的渲染，从而减少闪屏现象的出现。 综上所述，可以通过预加载、设置背景色、分包和异步加载等方式来减少页面首次加载的时间，从而避免闪屏现象的出现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值