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

最新推荐文章于 2024-07-30 00:29:31 发布
最新推荐文章于 2024-07-30 00:29:31 发布
阅读量1.9k 收藏 2
点赞数 3
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/c327127960/article/details/110638510
版权
本文介绍了一种解决在网页中切换图片时出现闪烁问题的方法。通过使用三元表达式改变单个image标签的src属性，避免了使用wx:if和wx:else导致的标签切换闪烁现象。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

鸡汤辉
关注
双缓冲加重载onpaint,OnEraseBkgnd解决屏幕闪烁问题
(RING~~~)Arrgghh! For the last time, I'm a Developer, not a Detector!
03-24 3856
近来发现用vc做ui真是一件非常痛苦的事情,微软有了C#这个新欢就不要vc这旧爱了.只能自己动手了.自己实现了按钮切换背景功能后,正暗自爽的我发现了一个很严重的问题.背景切换时总是先出现mfc自带的灰色难看界面才刷出我用form image控件载入的图片.上网google了很久.总算是解决我自己的问题.分三步走:第一, 在OnInitDialog中写入//-----------
节操播放器问题的较完整总结（上）
cjm2484836553的博客
11-01 1万+
在实际的开发中，用到了节操播放器，遇到了不少问题，于是就抽时间对所遇到的问题做了一个总结。以便于以后的查看，也希望可以对他人有一点帮助。
uniapp-微信小程序 图片加载时闪烁的问题
qq_43799363的博客
01-23 1959
处理 uniapp-微信小程序 图片加载时闪烁的问题
uniapp , 微信小程序 图片加载时闪烁
偏执的小男孩儿
09-05 890
uniapp , 微信小程序 图片加载时闪烁
微信小程序自定义tabbar,页面切换存在闪动【解决方案】
weixin_41104307的博客
04-09 3642
自定义tabbar，在需要的几个主页面都加入这么一个组件，但是有个情况；在切换tabbar的时候，跳转相应的页面，运行到真机或是模拟器，会存在图片闪动，而文字不会闪动；并且tabbar的图标颜色可以自定义。分析，使用照片和svg为啥会有闪动呢？主要是在切换到下一个页面的时候，tabbar组件又再一次加载了对应的资源，而资源加载耗费一定的时间，从而产生啦闪动效果；测试完之后，虽然有小闪动，整体效果 可以打70分。代码如下 svg是组件，参考上方的代码块。但是tabbar切换还是存在闪动。
微信小程序image组件频闪问题
一出好剧
06-20 5084
解决微信小程序image组件mode=aspectFill造成的页面频闪问题
解决js切换图片闪屏问题
恒二哥的博客
11-15 3750
主要原因：图片没有加载完全，然后调用了图片的动态效果，造成有闪屏的现象出现。 解决方法：先创建一个Image对象，然后优先加载图片，等加载完成，然后调用onload函数加载图片动态效果； 仅展示部分关键代码： var $picture = $("<div id='picture0' style='display: block;background-image: url(static/image/test0.png)' //设置等待函数(可以不用等待函数)，图片0展示0.8s后展示图片1的效果 s
Android开发学习（10）WebView访问网页
ESOO
08-11 3429
在不少的应用中，如果要快速搭建自己的应用，H5也是个不错的选择，在App端，保留H5的入口，也就是展示网页的入口就可以，本篇文章就和大家一起做一个展示网页的入口。 先看我们实现的结果： WebView使用H5实现的功能能够在不升级App的情况下动态更新，而且可以在Android或iOS的App上同时运行，节约了成本，提高了开发效率。 原理：其实就是Java代码和JavaScript之间的调用
ym——android源码大放送（实战开发必备）
热门推荐
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
Harmony面试题
最新发布
weixin_37704103的博客
07-30 954
Stage模型 : HarmonyOS 3.1推出 也就是API9 , 是目前==主推==且会长期演进的模型由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型stage: 舞台 /steɪdʒ/FA模型: FA（Feature Ability）模型：HarmonyOS早期版本开始支持的模型，已经不再主推feature: 特点 /ˈfiːtʃə(r)/区别: Stage模型与FA模型最大的区别在于。
自定义一个微信小程序tabBar，切换不闪烁，逻辑简单
Jacky_kplin的博客
02-15 5999
自定义微信小程序tabBar，切换效果不会闪烁，逻辑上简单易懂，适合新手。 微信小程序官方有提供了一个tabBar，实现底部导航栏的功能，虽然简单易用，但无奈限制条件有点多，不适合很多情况。 本来打算参考网友的写法实现自定义tabBar，但搜索了一下，有的虽然实现了，但切换的时候会有闪烁的效果，体验不佳。有的可以做到切换不闪烁，但是逻辑上稍微有点复杂。（也许是我懒得搜索更多，所以自己琢磨了一下，写...
使用video标签，连续播放无限个mp4(h264封装的)视频时，画面会闪烁的问题解决
wflsyf的博客
10-08 2495
采用的预加载方法，使用两个video标签加一个js中的Array（存储还没播放的视频。） html页面代码，除了下面的div之外，还需导入一个jquery的库我导的jquery-3.4.1.js这个。 <div> <video id="devVideo0" muted="muted">浏览器不支持 video0 标签</video> <video id="devVideo1" muted="muted">浏
解决 wx:if 引起的 先显示后隐藏的问题（内容闪烁问题）
qq_44441669的博客
11-09 1649
解决方案：先用一个变量让其隐藏，当从接口中获得数据的时候，在把这个 show 设置成 true 。这样出来的效果就是，内容逐渐在显示，依次显示。从而看不到闪烁再隐藏。 代码如下： <view class='box' bindtap="previewImage" wx:if="{{show && !orderInfo.deposit}}"> data: { s...
uni-app——解决image “闪烁” 问题
qq_43201350的博客
02-05 4190
1、官方文档 Image uni-app官方文档 如在公共的css文件中加入 image{ will-change: transform }
解决uniapp微信小程序v-if（v-else）闪屏现象
xbcmfy99的博客
06-07 4994
在页面中使用 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 8994
touchstart touchmove 微信小程序实现左右滑动进行切换数据页面 手指触摸左右滑动进行切换数据需要实现的是有一个tab栏,点选某一个tab的时候切换页面，手势滑动，左滑右滑效果和点击tab一样切换页面数据。
微信小程序加载图片闪烁bug解决方案（亲测有效）
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
12-18 9375
小程序图片闪烁是因为图片没有高度，加载时从第最高高度变到最适合高度的过程，解决方案有三种，我是使用的第一种 第一种 image{height:auto} //全局设置图片自适应，完美解决 第二种 未解决我当前的问题 让图片显示完在触发的事件bindload //wxml <image style="height:{{Flag?null:imageheight}}rpx;" bindload="showload"></image> //js showload(res.
小程序wx:if 隐藏显示时频幕闪烁问题
qq_43531886的博客
09-23 1577
小程序wx:if 隐藏显示时频幕闪烁问题 根据后台返回的值判断该显示哪部分该隐藏哪部分 页面结构 <view wx:if="{{isInit}}"> //返回数组有值显示 <view wx:if="{{array.length>0}}" class="page-myOrder-wrap"> </view> //没有数据显示 <view wx:else class="default"> </view> </view&
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值