模拟分页加载更多

overlayScrollbars

<template>
  <div class="user-footprint">
  <!---滚动条插件-overlay-scrollbars -->
    <overlay-scrollbars
      ref="osComponentRef"
      :options="osComponentOptions"
      style="height:100%"
    >
      <div
        class="frame-list infinite-list-wrapper"
        ref="loadMoreScroll"
      >
        <!-- 商品加载内容 -->
        <div
          v-for="(item, index) in newResult"
          :key="index"
        >
          <!-- 数据 -->
        </div>
        <div v-show="loadState">
          <div v-if="!loading" class="loadState">下拉加载显示更多</div>
          <div v-if="loading" class="loadState">加载中......</div>
        </div>
        <div v-if="noMoreLoad" class="loadState">没有更多商品</div>
      </div>
    </overlay-scrollbars>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 20,
      tollCount: 20, //共加载了多少条
      newResult: [],
      newList: [],
      loading: true,
      orderLength: 0,
      loadState: false, //加载状态
      noMoreLoad: false, //没有数据
      osComponentOptions: {
        nativeScrollbarsOverlaid: {
          initialize: true
        }
      }
    };
  },
  mounted() {
    // this.init();
    let obj = this.$refs.osComponentRef;
    let that = this;
    this.osComponentOptions = {
      callbacks: {
        onScroll: function() {
          let positionY = obj.osInstance().scroll().position.y;
          let maxY = obj.osInstance().scroll().max.y;
          if (positionY == maxY) {
            that.loadMore();//滚动条到底部加载更多
          }
        }
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //初始化状态
      this.count = 20;
      this.tollCount = 20;
      this.newResult = [];
      this.newList = [];
      this.loadState = false;
      this.noMoreLoad = false;
      this.loading = true;
      const params = {
        user: '测试',
      };
      api
        .arryList(params)//api接口
        .then(({ result }) => {
          if (result && result.length > 0) {
            if (result.length > this.count - 1) {
              this.loadState = true;
              this.noMoreLoad = false;
            } else {
              this.noMoreLoad = true;
              this.loadState = false;
            }
            if (result.length == this.count) {
              this.noMoreLoad = true;
              this.loadState = false;
            }
            this.newList = result;
            this.orderLength = result.length;
            this.newResult = this.newList.slice(0, this.tollCount);
            let clientHeight =
              document.body.scrollHeight || document.body.clientHeight;
            this.$refs["loadMoreScroll"].style.height = `${clientHeight -
              81}px`;
          } 
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false;
        });
    },
    loadMore() {
      if (this.loading) {
        return;//禁止同时加载
      }
      this.loading = true;
      setTimeout(() => {//延迟0.5s模拟加载
        if (!this.noMoreLoad && this.orderLength > this.count) {
          this.tollCount = this.tollCount + this.count;
          let resultLoading = [];
          if (this.orderLength > this.newResult.length) {
            resultLoading = this.newList.slice(
              this.tollCount - this.count,
              this.tollCount
            );
            this.loadState = true;
            this.noMoreLoad = false;
            this.newResult.push(...resultLoading);
          } else {
            this.noMoreLoad = true;
            this.loadState = false;
          }
        }
        this.loading = false;
      }, 500);
    },
  }
};
</script>