vue中楼层滚动实现原理解析

image.png

楼层效果如上图所示：当点击左边的索引表会跳到对应的模块，同时在滚动模块的时候索引表也跟着变。
这个主要是要利用iScroll的iscroll方法，实时获取滚动的y轴数据，同时获取每个索引对应模块的offsetTop的值，保存到一个数组中，这里我是把这个方法放到watch里面的，监视数据是否有变化，同时这里因为我们要获取dom元素，所以要用$nextTick方法等待dom渲染好再获取每个索引对应模块的高度。

 this.iscroll.on("scroll", function() {
        fn(this.y);
      });

   topArtistsInfo(newValue) {
      this.$nextTick(() => {
        this.$refs.artistInfo.forEach((item, index) => {
          this.indexTopOffset.push(item.offsetTop);
        });
      });
    },

1. y>=0时， 说明是往上滑动的，可以设置index =0;
2. y<0时，遍历数组indexTopOffset，如果-y值介于this.indexTopOffset[i]与this.indexTopOffset[i+1]的话，设置当前索引值为i, 结束循环。
   3.y<0时，循环结束都没有找到索引，则设置索引为this.indexTopOffset.length-1;

点击索引表，实现滚动到相应的模块就非常简单了。根据当前点击索引的索引，找到this.indexTopOffset里面的scrollTop值，然后利用iscroll里面的scrollTo方法滚动就可以了。