微信小程序-swiper(轮播图)抖动问题
ps:问题 组件swiper(轮播图)真机上不自动滚动 一直卡在那里抖动
以前遇到这个问题,官方一直没有正面回复。就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东西

就一直抖动这个问题,官方更新了一下出现bug的原因,没有具体阐述怎么去解决,但是总体说也给出了一个方案,大家可以去尝试一下是否还出现这个问题。下面是我根据官方,一直找了部分资料做了些处理就不说了,直接贴代码
wxml
<view class="swiper">
<swiper
autoplay="true" interval="4000" current="{{swiperCurrent}}" duration="1000" bindchange="swiperChange">
<swiper-item wx:for="{{bannerList}}" wx:key="*this" data-page="activity" data-id="{{item.id}}" data-type="{{item.type}}">
<image src='{{item.pictureUrl}}' class='u-img-slide' ></image>
</swiper-item>
</swiper>
<view class="dots">
<!-- 自定义角标 -->
<block wx:for="{{bannerList}}" wx:key="*this">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
</view>
js
swiperChange(e) {
let {current, source} = e.detail
if(source === 'autoplay' || source === 'touch') {
//根据官方 source 来进行判断swiper的change事件是通过什么来触发的,autoplay是自动轮播。touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的,所以做了限制,只有在自动轮播和用户主动触发才去改变current值,达到规避了抖动bug
this.setData({
swiperCurrent: current
})
}
},
主要是为了规避轮播抖动的bug,大家有更好的方案也可以在文章下评论,我也可以及时去更新,谢谢
微信小程序-swiper(轮播图)抖动问题的更多相关文章
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- 微信小程序的轮播图swiper问题
微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...
- 微信小程序3D轮播图
<!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...
- 【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
- 微信小程序 - 3d轮播图组件(基础)
<!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...
- 小程序 swiper 轮播图滚动图片 + 视频
直奔代码主题wxml: <view class="test_box"> <swiper indicator-dots="{{indicatorDots} ...
- 微信小程序 swiper轮播 自定义indicator-dots样式
index.wxml <view class="swiperContainer"> <swiper bindchange="swiperChange&q ...
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
随机推荐
- 选择IT行业的自我心得,希望能帮助到各位!(六)
在这个社会,想做大事的人很多,但是很多事情也挺难做的,为什么说复杂的事情简单做,简单的事情重复做,这样一个人才能获得更多的优越品质,为啥说改变,人还是挺难过的,都知道本性难移,想改挺难得.在这个社会千 ...
- Kafka 2.5.0发布——弃用对Scala2.11的支持
近日Kafka发布了最新版本 2.5.0,增加了很多新功能: 下载地址:https://kafka.apache.org/downloads#2.5.0 对TLS 1.3的支持(默认为1.2) 引入用 ...
- 【three.js 第一课】创建场景,显示几何体
<!DOCTYPE html> <html> <head> <title>demo1</title> </head> <s ...
- 计算机系统基础学习笔记(1)-基本GCC,objdump,GBD命令的使用
基本GCC命令的使用 GCC是一套由GNU项目开发的编程语言编译器,可处理C语言. C++.Fortran.Pascal.Objective-C.Java等等.GCC通常是 跨平台软件的编译器首选.g ...
- vue2.x学习笔记(十二)
接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础 组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例 ...
- JDBC教程——检视阅读
JDBC教程--检视阅读 参考 JDBC教程--W3Cschool JDBC教程--一点教程,有高级部分 JDBC教程--易百 JDBC入门教程 – 终极指南 略读 三层架构详解,JDBC在数据访问层 ...
- ASP.Net内置对象之网页之间传参(二)
Session对象 运用于多个界面调用某一个特定的用户信息,也就是每个Session 对象是独立的,个不受影响. Session对象的读取和存储 Session[name]=”chen”; 可以用来界 ...
- linux下文本三剑客之sed
继上一篇对正则表达式以及linux三剑客grep的讲解后,这一篇对sed重点介绍. 一.sed简介 sed表示流编辑器(Stream Editor).这是一个简单但功能强大的工具,分析文本,并无缝 ...
- 移动(appium)自动化测试-爬虫的另一种手段
appium自动化测试环境搭建: 1.Python环境(推荐2.7)和jdk. 2.Adb工具的下载:自己单独下载adb.夜神模拟器自带和Android sdk 3.Apk安装介质:真机.Androi ...
- 关于log4j、jul、jcl、slf4j等等日志组件的理解
日志组件: 我们经常在开发项目的时候,需要打印记录项目过程中的一些日志.那我们经常大概会用到 log4j.jul.jcl.slf4j.simple.nop.logback 等等,那我们就详细介绍下这些 ...