vue-移动端上拉加载功能

 

<article ref='articleHeight' class="show-list" style="height: calc(100vh - 46px - 38px - 38px)">
          <div ref='listHeight'>
    　　　　　　遍历的内容
          </div>
</div>

 

  mounted () {
    // 上拉加载
    let that = this;
    that.$nextTick(function() {
      that.$refs.articleHeight.addEventListener('scroll',()=>{
        let articleClientHeight = that.$refs.articleHeight.clientHeight;
        let listClientHeight = that.$refs.listHeight.clientHeight;
        let listScrollTop = that.$refs.articleHeight.scrollTop;
        if (that.iscontinue && !that.isPending && articleClientHeight + listScrollTop + 20 >= listClientHeight) {
          that.isPending = true;
          that.getData(that.pageNum+1);
        }
      })
   });
  },

 

  .show-list {
    overflow: auto;
    overflow-y: scroll;
    -Webkit-overflow-scrolling: touch;
  }