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>