vue-seamless-scroll刷新数据遇到问题

用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
    }
  }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值