问题:快速滚动 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个变量,问题就解决了。
网友评论