小程序swiper切换闪屏问题

最新推荐文章于 2024-08-21 17:47:57 发布
最新推荐文章于 2024-08-21 17:47:57 发布
阅读量1.5w 收藏 8
点赞数
分类专栏： 小程序 文章标签： 小程序开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_37772805/article/details/79552863
版权
本文探讨了在小程序开发中遇到的swiper组件在快速切换时出现的闪屏问题。通过官方文档了解到该问题，并在真机上复现。为了解决这个问题，作者采用了函数防抖的技术，限制了函数调用的频率，以此减轻闪烁现象。然而，这种方法仅略微改善了问题，仍存在闪屏情况。作者期待与读者分享更好的解决方案或已有的成功案例。
摘要由CSDN通过智能技术生成

小程序swiper滑动闪屏问题

在小程序开发过程中使用swiper做轮播图，发现当用户切换图片过快时会出现异常的闪屏现象，官方文档
中描述了这个Bug & Tip：
api
在电脑上测试的时候没有问题，但是在真机上会出现这种情况，当然一般用户不会切换那么快，我们还是要考虑如何避免这种会导致小程序崩溃的问题。项目中的swiper效果：
这里写图片描述

-解决方案:
函数防抖
既然是切换过快，不停调用函数引起的，那就限制函数调用的速度，在不引起卡顿的情况给它减减速。
wxml:

最低0.47元/天 解锁文章
wei_bo_ren
关注
专栏目录
swiper滚动元素闪屏问题解决方案
jyz18838957183的博客
08-12 7199
最近做了一个 产品展示H5的网站，用到了一个双向轮播图方法，随后在ios测试中发现 滑动过程中有几率出现闪屏问题，最后找到了解决方案， 在闪屏的父级元素增加 transform:translate3d(0,0,0); overflow:hidden; 子元素增加 transform:translate3d(0,0,0); 这样就可以解决掉了。。。 ...
小程序 组建swiper 图片抖动bug解决
hexiaoniao的博客
04-02 4369
用了小程序原生组建swiper组件图片滑动就会抖动。。坑死了。。 解决： <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{duration}}" current="{{preInd...
使用swipe组件，切换图片时出现闪烁
superYe7的博客
07-12 1123
解决方案： 父元素上增加样式style="transform:translate3d(0,0,0);overflow:hidden;" 子元素增加样式style="max-height:100%;max-width:100%;transform:translate3d(0,0,0)" <van-swipe :show-indicators="false" :loop="false" ref="swipeImg" :stop-propagation="false" style="t...
微信小程序开发，实现swiper轮播图
最新发布
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-21 1484
否则会导致未定义的行为。
swiper滑动时白屏/闪烁的问题
前端很杂，故名前端杂货铺 —— coderkey
09-01 2748
原因： swiper轮播滑动时出现白屏/闪烁/白条； 解决方案： // 给外部元素的父标css套一个： transform: translate3d(0,0,0); overflow: hidden; // 闪动元素/子元素： transform: translate3d(0,0,0);
使用swiper 出现闪屏问题
ljmkmnkl的博客
09-15 1万+
在做一个移动端项目时，用swiper 做的页面切换，但是页面里面还会有swiper轮播图 和其他内容，在滑动外部swiper时，除开里面swiper的元素会发生闪动的情况。 解决方法：给外部元素的父标css套一个：transform:translate3d(0,0,0);overflow:hidden; 闪动元素/子元素：transform:translate3d(0,0,0)
swiper下使用animated出现闪屏、闪烁。
weixin_44544576的博客
05-06 1091
开发时在pc端调试没有问题，但是到了移动端的部分浏览器就会出现。主要问题是部分浏览器不会自动开启硬件加速，所以可以通过transform来“骗”浏览器开启硬件加速渲染。 所以解决方法简单粗暴，css中加入这两段： .swiper-slide{ width: 100%; height: 100%; transform:translate3d(0,0,0); overflow:hidden; } .swiper-slide *{ transform:translate3d(0,0,0); }
微信小程序swiper来回切换闪烁
少吃点肉的博客
10-28 2271
问题：swiper组件自动播放时，左右来回切换闪烁 原因： 解决方案： 不要对current重新赋值，改写一下用cur swiperChange (e) { this.setData({ cur: e.detail.current }) }, ...
swiper个别机型闪动，看不到轮播效果
dhw276的博客
09-24 518
在react中使用swiper6时，个别老iphone机型出现了滑动时图片闪动，只出现半张图片的情况，按照网上的做法，在swiper组件外层的容器中添加： transform:translate3d(0,0,0); overflow:hidden; 在swiperSlide内部的item中添加： transform:translate3d(0,0,0) 可以解决。 但是还是会出现滑动很快，看不到滑动效果，直接从第一张切到第二张的情况，可以减慢swiper的动画效果，设置speed属性，默认为300
swiper轮播图息屏一段时间或快速滑动切换时出现疯狂抖动
Syleapn的博客
07-26 4612
gitHub代码下载：https://github.com/Syleapn/uni-app-swiper 以前做小程序项目的时候，没专门测试人员，都是开发者自测，可能我的手机性能比较不错（哈哈）或时机不对，总之没发掘到这个bug；近期做项目，测试了不同的手机，发现在一些手机上会出现这个bug,尤其是对于性能差的一些手机，出现的概率尤其的大。由于本次项目是基于uni-app的，直接就用uni-ap...
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
热门推荐
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）
qianduan666a的博客
07-14 545
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈） 文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css 和js热点面试题 Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子
H5页面（八）常见的问题二------填坑
斗师——Ace
06-09 1946
添加小程序，兑换各种视频教程/数据资源。 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS） 当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="app...
swiper滚动时闪动问题
weixin_56858385的博客
04-30 435
swiper滚动时闪动问题
微信小程序swiper闪烁抖动卡死问题
Ariel_lj的博客
04-08 3000
将微信小程序切换到后台一段时间，再打开微信小程序，出现卡死闪烁抖动 // 重点是方法使用了 animationfinish 在动画结束后再进行赋值操作 <swiper class="swiper_box" :current="current" @animationfinish="animationfinishChange" autoplay circular indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-act
swiper 快速左右滑动出现自动不停地抖动的BUG
熊小露的博客
08-07 2176
<template> <view class="content"> <view class="nav"> <view :class="indicator== 0 ? 'skyblue' : '' " @tap="onnav(0)">安装信息</view> <view :class="indicator== 1 ? 'skyblue' : '' " @tap="onnav(1)">OBD数据</view> .
uni-app的swiper快速滑动时闪屏问题解决
weixin_45145119的博客
02-25 1425
把swiper的@change事件改为@animationfinish
swiper滑动白屏 闪烁解决方案
DE_Shaw的博客
07-14 2813
swiper滑动白屏 闪烁解决方案 给外部元素的父标css套一个： transform:translate3d(0,0,0); overflow:hidden; 闪动元素/子元素： transform:translate3d(0,0,0)
微信小程序swiper切换动画
09-06
微信小程序提供了多种切换动画效果供开发者在swiper组件中使用。在swiper组件的属性中设置animation属性为true，即可启用切换动画效果。 swiper组件提供了多个属性，可以控制切换动画的方式和效果。例如，可以通过设置animationType属性来选择动画效果的类型，如平移、缩放、旋转等。可以设置duration属性来控制动画的持续时间，以控制动画的速度和流畅程度。还可以设置easingFunction属性来配置动画的缓动函数，以改变动画的过渡效果。 在swiper组件中，还可以通过设置current属性来动态改变当前展示的页面，从而实现切换动画。通过改变current属性的值，可以触发swiper组件的切换动画效果，使页面有流畅的切换动画。 此外，开发者还可以使用swiper组件提供的事件来控制切换动画。例如，在bindchange事件中可以监听页面切换的动作，并在回调函数中实现自定义的动画效果。开发者可以通过自定义CSS动画等方式，结合swiper组件提供的属性和事件，实现更加丰富的切换动画效果。 总之，微信小程序的swiper组件提供了多种切换动画效果的配置属性和事件，开发者可以根据需求选择和自定义动画效果，来为小程序的页面切换增加动感和流畅度。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值