美文网首页小程序时光轴
微信小程序关于swiper bindChange重复执行的问题

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

作者: 侯工 | 来源:发表于2019-04-23 19:21 被阅读15次
    问题:快速滚动 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:

    <swiper
    bindchange="swiperChange"
    current="{{current}}">
    

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


    扫码体验:

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/abybgqtx.html