纯JS实现加载更多（VUE框架）

Posted 2020-10-14 Lighter_Studio

<template>
    <div class = ‘car_list‘ reft=‘scrollobx‘ @scroll=‘scrollready($event)‘>
    </div>
</template>
<script>
    export default {
        data() {
            return  {
                lengthThreshold: 50, //当滑动到距离低端50px时，更新数据
                timeThreshold: 300, 
                promise: null
            }
        },
        methods: {
            // 滚动加载列表
            scrollready() {
                if(this.shouldScroll()) {
                    if (this.promise) {
                        return;
                    }
                    // 进行加载
                    this.fn();
                    // 防止多次滑动，频繁请求后台资源
                    let self = this;
                    this.promise = setTimeout(() => {
                        self.promise = null;
                    }, this.timeThreshold);
                }
            },
            // 调用父组件请求资源服务
            fn() {
                this.$emit(‘scrollChange‘);
            },
            shouldScroll() {
                if(document.scrollTop === 0) {// 滑动距离为0，还没开始滑动
                    return false;
                }
                // 列表高度 - 列表可视高度 - 滑动的高度 < 50px , 则加载更多
                return this.$refs.scrollbox.scrollHeight - this.$refs.scrollbox.clientHeight - this.$refs.scrollbox.scrollTop < this.lengthThreshold;
            },
        }
    }
</script>    

 

父组件的请求服务方法：

queryCarApplyShareList() {
        this.Load = true;
        CarResources.methods.queryCarApplyShareList(this.http, this.pageNo, this.pageSize).then((res) => {
          if (res && res.status === 200) {
               if (this.pageNo === 1) { // 加载第一页数据
                   this.CarList = res.data || [];
               } else { // 加载更多
                  this.CarList = this.CarList.concat(res.data);
               }
               this.IsLastPage = res.data.length === 0
          }
          this.Load = false;
       }, () => {
          this.Load = false;
          console.log(‘接口报错‘);
       });
},