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(轮播图)抖动问题的更多相关文章

  1. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...

  2. 自定义微信小程序swiper轮播图面板指示点的样式

    微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...

  3. 微信小程序的轮播图swiper问题

    微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...

  4. 微信小程序3D轮播图

    <!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...

  5. 【自定义轮播图】微信小程序自定义轮播图无缝滚动

    先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...

  6. 微信小程序 - 3d轮播图组件(基础)

    <!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...

  7. 小程序 swiper 轮播图滚动图片 + 视频

    直奔代码主题wxml: <view class="test_box"> <swiper indicator-dots="{{indicatorDots} ...

  8. 微信小程序 swiper轮播 自定义indicator-dots样式

    index.wxml <view class="swiperContainer"> <swiper bindchange="swiperChange&q ...

  9. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

随机推荐

  1. 2019-05-12 Python之模拟体育竞赛

    一.简介 可以选择任意规则,模拟不同的两个队伍进行球赛的模拟比赛 二.源代码 函数介绍: from random import * #输出介绍信息 def printIntro(): print(&q ...

  2. python初学(二)

    1.输入一个整数列表L,判断L中是否存在相同的数字: (1)若存在,输出YES,否则输出NO: (2)若存在,输出YES,同时输出相同的数字:否则输出NO. l=list(input()) print ...

  3. 高级工程师-Java注解

    高级工程师-Java注解 前言 代码,就是我们身为程序员的名片. 简洁,优雅,统一,是我们的追求. 优秀的代码,会给浏览者一种艺术的美感.如DL大神的JUC包,感兴趣的小伙伴,可以研究一下. 那么日常 ...

  4. Ansible简明教程

    Ansible是当下比较流行的自动化运维工具,可通过SSH协议对远程服务器进行集中化的配置管理.应用部署等,常结合Jenkins来实现自动化部署. 除了Ansible,还有像SaltStack.Fab ...

  5. Python处理HTTP返回包遇到问题总结TypeError、keyError、SyntaxError、AttributeError

    处理HTTP返回包包括对关键参数的校验,参数完整性检验,获取返回包参数的方法,返回包数据去重方法 在执行时遇到不少问题,部分问题记录如下: 1.报错信息:“TypeError: list indice ...

  6. idea ------- 源码调试运行

    1.创建一个 想学 的 ,使用单步调试进行一步步学习 调整系统资源 单步调试 (F7) ,进入不了源码,调整idea 让我们可以进入底层学习 想要在源码里面添加注释,要将引用的源文件指向,我们刚才复制 ...

  7. wordpress 常用操作

    删除主题 在主题目录 wp-content/themes 中直接删除即可. 首页和文章页使用不同主题 首页使用sidebar,文章页不使用sidebar,这样文章的内容可以占更宽的页面 安装插件 Mu ...

  8. java传参问题

    参考链接:https://www.cnblogs.com/linkstar/p/5951141.html public class Example { String testString = publ ...

  9. Spring Cloud微服务技术概览

    Spring Cloud 是一系列框架的有序集合.它利用 Spring Boot 的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载均衡.断路器.数据监控等,都 ...

  10. Android应用程序开机开机启动

    有很过情况都需要Android程序开机自启,也就是在手机开机之后马上执行相应的Android程序. 实现的方法就是,在手机开机的时候接受相应的广播,在Android程序中接受相应的广播. 第1步:建立 ...