swiper是微信小程序的一个滑动组件,非常重要。如果只是做简单的轮播图而不进行复杂的逻辑,直接可以使用,甚至不需要知道组件的方法。
今天在做一个如下的页面时,快速滑动swiper出现了问题:

控制台打印,发现bindChange绑定的方法重复执行了,我们再看官方文档的解释:

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

而我们的bindChange确实使用了setData(),来保证swiper组件的current属性与我们的this.data.index同步。为什么要有this.data.index这个变量?是因为我们要获得当前的页数进行其他的操作。比如上图底部的slider就用到这个变量。但是这个变量必须在bindChange进行同步。
至此,我们的程序在快速滑动的时候是有问题的。不断触发setData()。此外,在官方的开发社区找到这么一条:

后来一想,在bindChange改变swiper的current是有问题的,那么,改变另外的变量呢?答案是没有问题的。
那么,我们的做法是,data里定义2个变量:

  

data{
cur:0,//改变当前索引
index: 0//当前的索引
}

  

当前的页数用index来标记。swiper组件的current属性我们用变量cur。互不干扰。当页面变化时,我们设置index,当我们需要改变页面时,我们设置cur.index和cur是不同步的。

 <swiper
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
bindchange="swiperChange"
current="{{cur}}">

  

  

  swiperChange(e){
let current = e.detail.current;
let source = e.detail.source
//console.log(source);
console.log(current,this.data.index,this.data.cur)
this.setData({
index:current
})

  

这个问题的出路就是,不要想着用一个变量作为swiper的current和当前页码的标记。一旦分开这2个变量,问题就解决了。

微信小程序swiper bindChange重复执行的更多相关文章

  1. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

  2. 微信小程序onLaunch、onLoad执行生命周期

    原文转载自:微信小程序onLaunch.onLoad执行生命周期 1.需求:先执行App的onLaunch添加验证权限等,再执行Page里的onLoad. 2.问题:还没有等onLaunch执行完成, ...

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

    微信小程序开发文档-组件-swiper后面追加的新闻如上图所示: 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象. bindcha ...

  4. 微信小程序swiper制作内容高度不定的tab选项卡

    微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...

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

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

  6. 微信小程序swiper高度自适应,swiper的子元素高度不固定

    小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...

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

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

  8. 微信小程序wx.login先执行onLaunch与onLoad加载顺序问题

    @ 目录 遇到问题 请求api返回需要先登录,实际上登录已成功 问题分析 解决问题 自定义回调函数 app.js index.js 扩展提问 学习交流 随机数字随机幸运数+ My Blog 技术交流 ...

  9. 基于angular实现模拟微信小程序swiper组件

    这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...

随机推荐

  1. [bzoj4010][HNOI2015]菜肴制作_贪心_拓扑排序

    菜肴制作 bzoj-4010 HNOI-2015 题目大意:给定一张n个点m条边的有向图,求一个toposort,使得:(1)满足编号为1的点尽量在前:(2)满足(1)的情况下编号为2的点尽量在前,以 ...

  2. Clojure:从Java调用Clojure

    我们要在Java中调用Clojure有两种方法,一种是将Clojure代码生成class文件,另外一种是通过Clojure RT方式直接在java程序中调用Clojure代码.两种方式各有优缺点, 第 ...

  3. Clojure:导入lein项目到IntelliJ IDEA

    首先,我们需要先创建一个lein项目(废话..) lein new [项目名称] 然后生成Maven的pom.xml文件 cd [项目目录] lein pom 最后,在InteliJ IDEA中选择导 ...

  4. 《Android源代码设计模式解析与实战》读书笔记(十八)

    第十八章.代理模式 代理模式也称托付模式,是结构型设计模式之中的一个.是应用广泛的模式之中的一个. 1.定义 为其它对象提供一种代理以控制对这个对象的訪问. 2.使用场景 当无法或不想直接訪问某个对象 ...

  5. Codeforces Round #Pi (Div. 2) —— C-Geometric Progression

    题意: 如今有n个数,然后给出一个数k(代表的是等比数列中的那个公比),然后第二行给出n个数,代表的是这个序列. 最后的问题是叫你找出在这个序列中满足公比为k的三个数有几种.并输出方案总数. 思路: ...

  6. selenium使用chrome抓取自动消失弹框的方法

    selenium使用chrome抓取自动消失弹框的方法 转:https://blog.csdn.net/kennin19840715/article/details/76512394

  7. Spring学习笔记——Spring事务仅仅对执行时异常回滚

    我们在使用Spring时候一般都知道事务在遇到异常的时候会回滚.岂不知Spring的事务默认仅仅有在发生执行时异常即:RunTimeException时才会发生事务,假设一个方法抛出Exception ...

  8. SQL server触发器、存储过程操作远程数据库插入数据,解决服务器已存在的问题

    近期弄了一个小项目,也不是非常复杂,须要将一个数据库的一些数据备份到另外一个库.不是本地,可能是网络上其它的数据库.想了一下,用了存储过程和触发器. 也不是非常复杂,首先我须要操作远程数据库,于是写了 ...

  9. BNU 13289 Energetic Pandas DP

     Energetic Pandas  There are n bamboos of different weights Wi. There are n pandas of different capa ...

  10. n阶导函数存在与n阶可导的区别

    1.f(x)n阶导函数存在 <=======>  f(n)(x)存在  指的是在某个区间内有定义 2.f(x)n阶可导根据题意可以有两种不同的解释: ①.题目中说的是在某点即在x=x0处n ...