vue - 初级无限滚动

问题

之前做过一个关于闯关的项目，一个分类里面都有600个小关卡，用户需要滚动选择关卡，为了能让页面看起来很好看，所以就做了个无限滚动的页面。

无限滚动

思路

• 1. 无限滚动并不是真的一直在滚动，而是两张或者更多的可以无限链接的图片相互的变换所在的位置。ps:（就像人民币，两张人民币怎么拼接花纹都能对应）
• 2.人之所以认为你把图片滑动了，并不是它真的动了，它可以是相对于你的手机屏幕移动而已

• 3.只要在手指滑动的时候记录手指滑动的高度轨迹，然后让图片的定位相对应的滚动即可

  
  
  分析图

由上图可分析：

两张图片的top值的范围是(bgh , - bgh]

方案清晰思路明白，所以一起都变的简单明了，就唯独剩下计算了
**解析updatePagePositon 方法 **

    updatePagePositon(onceY) {
      let p = this.scrollTotal + onceY;   //获取总共的滚动的距离
      let h = this.bgH;                          // 定义图片高度
      let offset = p % h;                       //余下了多少高度（相对滚动距离）
      let v = Math.floor(Math.abs(p) / h) % 2;      //先判断滚动的数量是几个bgh，在相对位置不变的情况我们眼前应该是那个组件

从上面代码能看出 ：
offset 是 真正滚动需要增加的距离，
v 值是 0 || 1

分析图 1

从上图分析组合这个公式结果是

offset + (i - v) * h * (-2 * i + 1)
//但是该结果在offset为正数时候没问题，为负数时有问题

分析图2

因为从分析图1 的出的结果能看出
offset + ( - h) === offset + (i - v) * h * (-2 * i + 1)
所以分析图2 能得出
offset + h === offset + (i - v) * h * (-2 * i + 1) * （-1）

      this.pages.forEach((val, i) => {
        let m = p < 0 ? -1 : 1;
        this.$set(this.pages, i, offset + (i - v) * h * (-2 * i + 1) * m);
      });

    },

代码地址：码云 vue-question 无限滚动 - 初级无限滚动

下一篇中级无限滚动

结束 送你们一张循环图

循环图