绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)

微信小程序开发文档-组件-swiper后面追加的新闻如上图所示;

如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象。

1   bindchangeSwiper(event) {
2     console.log(event.detail);
3     this.setData({
4       current: event.detail.current
5     })
6   },

可是有的时候我们确实需要动态获取当前的swiper-item索引,用来额外做一些其他操作;

为了解决这个问题,我们需要额外定义一个变量。

1     current: 0, // swiper初始对应的swiper-item
2     currentIndex: 0, // 用来记录当前swiper对应的索引index
1   bindchangeSwiper(event) {
2     this.setData({
3       currentIndex: event.detail.current
4     })
5   },

这样问题解决啦!

原文地址:https://www.cnblogs.com/lml2017/p/10395335.html

时间: 2024-11-10 02:26:48

绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)的相关文章

swiper在vue项目中的循环轮播bug以及点击事件

一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. 解决办法:在从后台获取完数据之后再初始化swiper,同时启动动态检查器observer,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper,默认是false.这时候使用autoplay开启自动播放是可以的, 然而当加上loop让其循环播放时,会发现是有

JS-特效 ~ 01. 事件对象、offset偏移/检测、无缝滚动、自动循环轮播图

Math.round ( ) :正书四舍五入,负数五舍六入 用定时器,先清除定时器 事件对象 event event:事件被触动时,鼠标和键盘的状态,通过属性控制 Offset:偏移,检测 1. 获取元素尺寸 2. 检测盒子的宽高     事件源.offsetLeft. /. ele.offsetWidth /返回的数值没有单位,是number类型 /包括内边距.边框,不包括外边距 3. 获取定位的元素的left和top值  offsetLeft / offsetTop 如果被获取的元素没有定位

swiper在angularjs中使用循环轮播失效的解决方法

bug描述:我在anjularjs 中使用了swiper轮播图,通过动态获取到数据插入swiper-slide中,我在swiper初始化中设置了loop(循环),但是在出现了一点小问题,swiper会失效,划不动,当我设置固定的数据通过ng-src 插入到swiper-silde中,会正常轮播,但是第一张图会出现空白.通过查询了资料,发现swiper和angularjs执行的机制是不同的,swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类

vue使用swiper轮播组件开启loop模式时的问题总结

最近在vue项目中使用了swiper插件来完成轮播功能,没有开启循环模式,一切都很顺利 具体怎么在vue项目中引入swiper插件,这个太简单就不提了,上代码 html <div class="swiper-container"> <div class="swiper-wrapper"> <template v-if='banner.length > 0'> <div class="swiper-slide&

如何使用swiper写轮播

之前大家都写过轮播图吧,相信在写轮播图的过程中也因为当中的某些细节烦恼过吧,接下来我给大家讲述一个方便快捷的轮播图吧! Swiper常用于移动端网站的内容触摸滑动 1.第一步先引入css---swiper.css插件和JQ---swiper.js 插件, 然后呢就开始写轮播图了 <div class="swiper-container">--首先定义一个容器 <div class="swiper-wrapper"> <div class

JS_图片轮播事件

用JavaScript实现一个简单的图片轮播事件. 主要的思想是把需要显示的图片显示出来,不需要的隐藏,然后使用自己封装的代码动画显示出来(setInterval) 贴上代码: html 1 <div class="content"> 2 <div class="img_change"> 3 <div id="img_container"></div> 4 5 <div class="

新版的复制统计工具介绍,微信加粉推广辅助工具,增强了复制统计功能以外,新增了二维码轮播,电话拨打统计

今年已经发展到了3.x版本,新版的比老版本新增了很多功能,除了之前已有的微信号在线管理,和复制统计,以及网页状态监控等功能以外.新增了扫码统计,二维码轮播,微信号自动上下控制,手动控制,拨打电话统计,点击复制,打开微信等,还有更强大的拦截功能.到现在为止,我们应该是最完善的微信加粉推广辅助工具了. 并且我们一直提供免费版,相对于付费版功能并无过多缩减,只是限制了能统计的落地页的数量,因为统计流量巨大,如果免费开放更多会统计的数量会占用更多的服务器资源造成服务器压力过大,从而服务器成本也会直线上升

Windows技巧|如何在Windows 10在锁屏状态下打开某种应用程序?

本文标签:    电脑技巧 Windows技巧 Win10的锁屏界面 互联网杂谈 在Win10的锁屏界面,右下角有三个图标,中间有个像时钟的图标就是所谓的"轻松使用"按钮,里面有讲述人.放大镜.屏幕键盘等功能,这些功能我们可以修改成我们常用的应用程序,这样将大大的方便我们的操作,那么该如何修改呢? 默认情况下在锁屏界面点击右下角中间的图标会弹出"轻松使用"菜单 具体方法如下: 1.在Cortana搜索栏输入regedit,按回车键进入注册表编辑器; 2.定位到:HK

ios开发图片轮播器以及定时器小问题

一:图片轮播器效果如图:能实现自动轮播,到最后一页时,轮播回来,可以实现拖拽滚动 二:代码: 1 #import "ViewController.h" 2 static CGFloat const imageCount = 5; 3 @interface ViewController ()<UIScrollViewDelegate> 4 /*scrollView*/ 5 @property (nonatomic,weak)UIScrollView *scroll; 6 /*