vant中 list组件使用，分页及伪分页做法

 第一种伪分页做法

// 在后台没有提供分页的基础上，要想长列表实现瀑布流滚动，当列表即将滚动到底部时，会触发事件并加载更多列表项。

首先要做的就是监听页面的滚动事件，如下利用window.addEventListener对页面的滚动进行监听，定义监听到滚动时的方法，在方法中可以取到页面的滚动高度scrollTop ，可视高度clientHeight ，内容高度scrollHeight，

当scrollTop + clientHeight == scrollHeight时，页面就是滚动到底部了

window.addEventListener("scroll", this.handleScroll, true);

handleScroll() {
      if (this.paymentList.length >= this.total) return
      let scrollTop = document.documentElement.scrollTop;//滚动高度
      let clientHeight = document.documentElement.clientHeight;//可视高度
      let scrollHeight = document.documentElement.scrollHeight;//内容高度

      scrollTop + clientHeight == scrollHeight;
      if (scrollTop + clientHeight == scrollHeight) {
        this.InquireMsg() // 每滑动到底部一次就调用一次接口
      }
    },

 在实现伪分页的主要思路上，在每次页面滚动到底部时，调用 InquireMsg 这个方法，用循环每次往空数组paymentList中添加已经拿到的后端返回的数据，循环的次数就是添加的条数，每次调用，每次添加的数组的length都是在增加的，所以也不会添加重复的数据，直至添加完

    InquireMsg() {
      let reqdata = {
        startDate: this.starttimeapi,
        endDate: this.endtimeapi
      }
      organEndowmentPayment(reqdata).then((res) => {
        let { code, data, msg } = res
        if (code == 200) {
          this.showemptyBox = false
          this.total = data.paymentList.length
          if (data.paymentList.length > 0) {
            // 滚动加载，i为加载条数
            for (let i = 0; i < 10; i++) {
              if (this.paymentList.length < data.paymentList.length) {
                this.paymentList.push(data.paymentList[this.paymentList.length])
              }
            }
            // 数据加载完毕结束loading
            this.loading = false;
            if (this.paymentList.length >= data.paymentList.length) {
              this.finished = true;
              this.finishedText = "没有更多数据了";
            }
          } else {
            this.finished = true;
            this.loading = false;
            this.emptyMsg = msg
            this.showemptyBox = true;
          }
        }
      }).catch((error) => {
        console.log(error, 'error');
        this.paymentList = []
        this.loading = false;
        this.emptyMsg = error.msg;
        this.showemptyBox = true;
        this.finishedText = ''
      })
    },

第二种伪分页做法 

 依旧是先监听页面的滚动事件

window.addEventListener("scroll", this.handleScroll, true);

 这次实现的思路和上面的就不一样了，这次是在页面滚动到底部时，往空数组中添加数据，每次滚动到底部，会巧妙的运用数组的splice方法，从数组中截取数据，这个方法也有删除的意思，就是把截取的数据从数组中删除掉，splice方法返回删除的数据，所以当截取完所有数据，就可以判断是否还有数据，没有数据就完成了。

handleScroll() {
      // this.$store.commit('showLoading');
      if (this.paymentList.length >= this.total) return
      let scrollTop = document.documentElement.scrollTop;//滚动高度
      let clientHeight = document.documentElement.clientHeight;//可视高度
      let scrollHeight = document.documentElement.scrollHeight;//内容高度
      if (scrollTop + clientHeight == scrollHeight) {
        this.paymentList = [...this.paymentList, ...this.initialpayment.splice(0, 10)]
        if (this.paymentList.length >= this.total) {
          this.finished = true;
          this.finishedText = "没有更多数据了";
        }
      }
    },

 在 InquireMsg 方法中，当拿到数据，判断有数据的length不为0后，还是巧妙的运用数组splice方法，把截取到的数据赋给定义好的空数组，渲染到页面上，在每次滚动到底部时，在去从零截取数据，直到所有数据截取完。

    InquireMsg() {
      this.finishedText = '';
      let reqdata = {
        startDate: this.starttimeapi,
        endDate: this.endtimeapi
      }
      endowmentPayment(reqdata).then((res) => {
        let { code, data, msg } = res
        if (code == 200) {
          this.showemptyBox = false
          this.initialpayment = data.paymentList //定义空数组接收所有数据
          this.total = data.paymentList.length

          if (data.paymentList.length > 0) {
            this.paymentList = this.initialpayment.splice(0, 10)
            // 数据加载完毕结束loading
            this.loading = false;
            if (this.paymentList.length >= this.total) {
              this.finished = true;
              this.finishedText = "没有更多数据了";
            }
          } else {
            this.finished = true;
            this.loading = false;
            this.emptyMsg = msg
            this.showemptyBox = true;
          }
        }
      }).catch((error) => {
        console.log(error, 'error');
        this.paymentList = []
        this.loading = false;
        this.emptyMsg = error.msg;
        this.showemptyBox = true;
        this.finishedText = ''
      })
    },

第三种vant list 分页做法

html:

<van-list
   v-model:loading="loadingpage"
   :finished="finishedpage"
   finished-text="没有更多数据了"
   @load="onLoad"
> 
</van-list>

js写法：

const current = ref(1)
const size = 10
const total = ref(0)
// 定义分页相关数据
const loadingpage = ref(false)
const finishedpage = ref(false)
// 定义接口数据数组
const collectPositioninfoList = ref([])
const getList = async () => {
  let obj = {
    current: current.value,
    size: size
  }
  const {
    data,
    data: { records }
  } = await collectPositioninfoApi(obj)
  if (records.length == 0) {
    // 判断获取数据条数若等于0
    collectPositioninfoList.value = [] // 清空数组
    finishedpage.value = true // 停止加载
  }
  // 若数据条数不等于0
  total.value = data.total // 给数据总条数赋值
  collectPositioninfoList.value.push(...records) // 将数据放入collectPositioninfoList 中
  loadingpage.value = false // 加载状态结束

  // 如果collectPositioninfoList 长度大于等于总数据条数,数据全部加载完成
  if (collectPositioninfoList.value.length >= total.value) {
    finishedpage.value = true // 结束加载状态
  }
}

// 被 @load调用的方法
const onLoad = () => {
  // 若加载条到了底部
  let timer = setTimeout(() => {
    // 定时器仅针对本地数据渲染动画效果,项目中axios请求不需要定时器
    getList() // 调用上面方法,请求数据
    current.value++ // 分页数加一
    finishedpage.value && clearTimeout(timer) //清除计时器
  }, 100)
}

这种写法和上面差不多，更简洁

// list列表加载
const loadingpage = ref(false)
const finishedpage = ref(false)
const noData = ref(false)
const pageData = ref<records[]>([])
// 加载页面数据
const params = ref<pageParams>({
  current: 1,
  size: 10
})
const onLoad = async () => {
  const timer = ref()
  timer.value && clearTimeout(timer.value)
  timer.value = setTimeout(async () => {
    const res = await getCollectInfoPage(params.value)
    if (res.data.records.length == 0) {
      noData.value = true
      // 停止加载
      finishedpage.value = true
    }
    pageData.value.push(...res.data.records)
    // 判断已经加到最后一页
    if (params.value.current >= res.data.pages) {
      // 加载完成
      finishedpage.value = true
    } else {
      params.value.current++
    }
    // 加载状态结束
    loadingpage.value = false
  }, 100)
}