vue移動端上拉加載

    <!-- 一名小白，有大佬的話請留情 -->

<template>
　<!-- 自己實現上拉加載就需要一個滾動的容器 -->
  <div class="scroll-box" @scroll="scrollBox($event)">
    <!-- 自己實現上拉加載 -->
    <ul ref="scroll-box">
      <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
  </div>
</template>

 

<script>
export default {
  data() {
    return {
      list: [],
      num: 1,
    };
  },
  created() {
    this.rember();
  },
  methods: {
    rember() {
      //   console.log("123");
      for (var i = 0; i < 100; i++) {
        if (this.list.length <= 500) {
          this.list.push(this.list.length + 1);
        }
      }
    },
    scrollBox(e) {
      // console.log(e.target.scrollTop);
      console.log(this.num);
      // 找一個滾動到合適加載的位置(與數據多少有關)，並拿到值，做處理
      // 如果滾動的位置為2100加載
      // 並且到每次滾動的位置一定與2100有關
      if (e.target.scrollTop >= 2100 * this.num) {
        this.rember();
        this.num += 1.2;
      }
    },
  },
};
</script>

<style scoped lang = "less">
.scroll-box {
  height: 100%;
  overflow-y: auto;
}
</style>