记一次关于vantUI 下拉列表list加载数据的问题

因为是第一次用vantUI所以很多地方还不是很熟，这个vant-list列表加载数据又需要在很多地方用到，这里记一下正确的用法。。

这里先说一下会遇到的问题。

1. 会无限请求接口
2. 列表不会滚动始终只展示第一页的数据

贴组件代码

<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      :offset="10"
      finished-text="没有更多了"
    >
      <van-cell v-for="item in articlesList" :title="item.name_display">
        <template #label>
          <van-image :src="timesrc" />
          <span class="article-box-time">{{ item.name_display }}</span>
        </template>
      </van-cell>
    </van-list>
  </van-pull-refresh>
</template>

这里就不作过多解释，官方文档对每个属性都有解释，这里我强调一下loading表示是否加载，finished表示是否加载完所有数据(一直请求接口的问题可能存在这里)

JS

data() {
    return {
      loading: false, //加载状态
      finished: false, //加载完成
      refreshing: false,
      query: {
        currentPage: 1,
        pageSize: 10,
      },
      articlesList: [],
    }
  },

这里有个问题，当loading设置为false时，首次加载的时候会触发2次请求，但是设置为true后，页面又无法向下滚动，这里暂时记一下这个问题。。

重点说一下加载代码

首先在methods中获取列表数据的方法

getList() {
      getArticlesList({
        limit: this.query.pageSize,
        page: this.query.currentPage - 1,
        title: this.title,
      })
        .then((msg) => {
          const rows = msg.list;
          if (
            rows === null ||
            rows.length === 0 ||
            this.query.pageSize * this.query.currentPage > msg.meta.total
          ) {
            this.finished = true;
          }
          this.articlesList = this.articlesList.concat(rows);
        })
        .finally(() => {
          this.refreshing = false;
          this.loading = false;
        });
    },

这个getArticlesList是我请求后台的方法，也就是axios或ajax请求数据，title是筛选条件可以忽略。

mag.meta.total是后台返回的总条数。

这里就是说当当前页数 x 每页的总数 > 总记录数 就表示所有数据已经加载完成就可以设置finished为true(之前一直通过其他形式来判断的有问题，目前这种是最好的方法)

然后无论是否请求成功都需要将loading设置为false

然后onLoad中需要去加载这个方法，因为列表会向下滚动，所以注意这里要将页数+1，也就是this.qurey.currentPage ++

onLoad() {
  this.query.currentPage++;
  this.getList();
},

然后在created中请求的是getList()而不是请求onLoad()方法，这里也要记一下。。

created() {
  this.getList()  
}

最后向下拉刷新的方法

//下拉刷新
onRefresh() {
  this.finished = false
  this.query.currentPage = 1
  this.getList()
},