分类：算法

页面跳动

出现这种情况的原因是虚拟列表所渲染出的Dom是有限的，向下滚动时需要将上方的Dom移除，向上滚动时需要添加上方的Dom

解决方案

降低Dom渲染的频率

1. 我有一个当前所处位置的检测值命名为topIndex，以3的倍数进行检测，当我所处位置为1值为0，所处位置为4值为3
2. 我有一个判断当前滚动方向的检测值，命名为slideArrow，当向下滑动屏幕是置为down，向上滑动屏幕时值为up
3. 我有一个由topIndex和slideArrow组合而成的计算值，命名为topAndArrowChange
4. 监听topAndArrowChange，当发生改变时判断滑动方向，改变虚拟列表的值
5. 当快要到底部时会触发查找列表，数据会放进源列表recommendList中
6. 当滑动方向为up向上滑动，看下面的内容。或者滑动方向为down向下滑动，看上面的内容。那么虚拟列表为源数据的截取值。

topAndArrowChange(newVal) {
      const circle = 30
      const circleNum = parseInt(this.topIndex / circle, 10)
      console.log(newVal)
      if (this.slideArrow === 'up') {
        this.virtualRecommendList = this.recommendList.slice(circleNum * circle, circleNum * circle + 60)
      } else {
        const start = Math.max((Math.round(this.topIndex / circle) - 1) * circle, 0)
        const end = Math.round(this.topIndex / circle) * circle + circle
        this.virtualRecommendList = this.recommendList.slice(start, end)
      }
    },

看下面的内容，截取的部分

如果当前的topIndex为40，则截取30至90，最大截取60条

看上面的内容，截取的部分

如果当前的topIndex是0，则截取0-30

如果当前的topIndex是36，则截取0-60

如果当前的topIndex是119，则截取90-150

如果当前的topIndex是129，则截取90-150

无限触发查找数据

出现原因是初始时虚拟列表没有赋值，滚动过快触底，虚拟列表来不急赋值

解决方案

1. 添加源数据列表监听，发现源数据列表更新的同时修改虚拟列表的值
2. 只有在查找数据时才会触发源列表数据更新，因此虚拟列表的截取值为

 // 防止无限触发查找列表
    recommendList() {
      const circle = 30
      const circleNum = parseInt(this.topIndex / circle, 10)
      this.virtualRecommendList = this.recommendList.slice(circleNum * circle)
    },

当还是以30为一个循环，最多截取不超过60个Dom

总结

综上，此方案虚拟列表最多渲染60条数据