手机端下拉加载

第一种方式(通过可视高度和滚动条高度来判断)

mounted() {
     
      this.getParmas()
     

      let that = this;
      window.onscroll = function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        if (scrollTop + windowHeight == scrollHeight) {
         
            that.page_count = that.page_count + 1;
            that.getUserJourney();
         
         
        }
      };


    },

第二种(通过内容区的可视高度和滚动条高度判断)

 mounted() {
    let _:any=this
    const SELECTWRAP_DOM:HTMLElement | null = document.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM&&SELECTWRAP_DOM.addEventListener('scroll',function (e:any) {
      const CONDITION = this.scrollHeight - this.scrollTop > this.clientHeight
      if(!CONDITION){
        _.getselectData()
      }
    })
  }

第三种用的是elementUI中的v-infinite-scroll

<div class="box" v-infinite-scroll="test">
    <div class="list">111</div>
    <div class="list">111</div>
    <div class="list">111</div>
    <div class="list">111</div>
  </div>

每次滚动到底部时就可会触发test这个方法。属性仅在设置了overflow的地方有效。
目前经测试在elementUI项目有效,具体查看elementUI的无效滚动。其他项目需要安装组件’vue-infinite-scroll

原文地址:https://www.cnblogs.com/xiaohuohuai/p/14759184.html