vue移动端上划加载更多

vue移动端碰到比较复杂的页面加载更多怎么办呢？踩坑之路

废话不多，直接上代码

<div ref="Box" @scroll.passive="scroll">//列表最外层盒子
<div class="list"></div>
</div>
在mounted里面调用
window.addEventListener("scroll", this.scroll, true);
methods方法
 scroll() {
//滚动条距离顶部的距离（因为是负的所以*-1）
      let scrollTop = this.$refs.Box.getBoundingClientRect().top * -1;
//页面可是高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
//盒子的高度
      let scrollHeight = this.$refs.Box.scrollHeight;
//当滚动条距离顶部的距离加上页面可视高度和盒子的高度相等的情况下说明已经到底了
      if (scrollTop + windowHeight == scrollHeight ) {
//可以操作加载更多了。
        this.PageIndex++;
        this.loading=true
        this.getList();
      }
    },

根据个人项目需求总结，如果有什么问题评论区提出来，大家共同解决，共同成长。