移动端分页，上拉加载分页数据

关于移动端上拉加载更多分页数据，简单的做了以下笔记：

实现方案1： vue2

<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <!-- 模块内容：遍历列表Lists -->
</van-list>

data() {
    return {
      Lists: [],
      loading: false,
      finished: false,
      page: 1,//当前页
      num: 10,//每页条数
    }
  },
  
  methods: {
    onLoad() {
    //每次调用page加1
      this.page += 1
      this.getData()
    },
    getData() {
      getFollowOne({
        page: this.page,
        num: this.num
      }).then(res => {
        this.loading = false
        if (res.code == 200) {
          if (res.info.length == 0) {
            this.Lists = []
          } else {
            this.Lists = this.Lists.concat(res.info)
            if (res.info.length < 10) {
              this.finished = true
            }
          }
        } else {
          this.Lists = []
          this.loading = false
        }
      })
    }
  }

实现方案2： vue3:

<van-list
    v-model:loading="state.loading"
    :finished="state.finished"
    :immediate-check="false"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <!-- 模块内容：遍历列表Lists -->
</van-list>
const state = reactive({
  Lists: [],
  startPos: 0,
  endPos: 19,
  loading: true,
  finished: false
});

const onLoad = () => {
  if(!state.Lists.length)return;
  getOnlyClassDynamic()
};

const getOnlyClassDynamic = () => {
  //接口
  getOneClassDynamic({
     startPos: state.startPos,
     endPos: state.endPos,
  }).then((res) => {
      state.loading = false;
    if (res.message == "Success") {
          state.Lists = state.Lists.concat(res.list)
          if (res.list.length == 20){
            //还有下一页
            state.startPos += 20;
            state.endPos += 20;
          } else {
            //没有下一页了
            state.finished = true;
            state.loading = false;
          }
      } else {
        state.loading = false;
        state.finished = true;
      }
  })
}