用vue-seamless-scroll封装了个滚动列表
一、刷新数据后长度小于滚动数量时还是会滚动
limitMoveNum设置为5,但数据小于5时列表还会滚动,数据还会滚到不见
查看源码发现
初始化后_move()函数会根据设置的单步暂停,利用定时器的方法重复调用_move(),呈现出停止后继续滚动效果
但是在重新获取数据,调用reset方法时并没有清除定时器
因此在initMove方法中加入清除定时器方法
/* 清除定时器 */
if (this.singleWaitTime) clearTimeout(this.singleWaitTime)
列表滚动重新获取数据就能根据数据长短和limitMoveNum控制是否滚动了
二、定时刷新数据,数据不变时仍重新渲染
但是在获取后端数据时,无论数据是否相同列表都会刷新回到顶部重新滚动,这导致列表滚动还没滚动完页面定时刷新一开启就会回到顶部。
研究源码后发现
vue-seamless-scroll根据arrayEqual方法判断新、旧数据是否相同
但是该方法无法判断对象类型的数据
因此我在for循环前加入判断
/* 防止比较类型为对象,相同仍触发重新渲染 */
if (typeof arr1 === 'object') {
if (JSON.stringify(arr1) === JSON.stringify(arr2)) {
return true
}
}