微信小程序关于swiper bindChange重复执行的问题

问题：快速滚动 swiper，导致出现一卡一卡或者来回滚动的效果。

前言：一开始以为是请求的次数太多了，setData 的执行先后导致的，花费了大量的时间去做数据精简、逻辑判断等工作，到最后还是仍是没有解决，只能排除了这种可能。之后又把问题锁定在了 swiper 组件本身上边，控制台打印，发现 bindChange 绑定的方法重复执行了！！！

查看了一下官方文档的解释：

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

那怎么处理呢？原文地址

我们的做法是，data里定义2个变量：

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

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

WXML：

JS：

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个变量，问题就解决了。

---

扫码体验：