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>