需求，移动端列表页不再是分页实现

要求很简单。 这里介绍了vant-ui，实现的时候遇到了各种问题。 网上查了一大堆，发现没有一个能用的，而且都有问题。 我的整个身体感觉很糟糕。 为什么？

我先记录一下我的实现过程。 虽然不是最好的实现方式，但在各种暴力测试中也没有发现任何bug。 它终于起作用了。

测试中遇到哪些问题？ 下拉刷新，数据突然消失，页面列表一片空白； 第二页加载完毕，还在加载中，暴力进行下拉刷新，导致第二页数据跑到了第一页数据的最上面，然后又是第二页数据和第三页数据。 我尝试了很多方法，但没有一个有效。 这件破事确实让我很痛苦。

目前的方法还是比较稳定的，至少不存在这种莫名其妙的bug。

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="item-wrap van-hairline--bottom"
        >
          <div class="item-name">{{ item.name }}</div>
        </div>
      </van-list>
    </van-pull-refresh>
。。。。。。。。。。
data() {
    return {
      list: [], // 列表数据
      pageIndex: 1, // 当前页码
      pageSize: 10, // 分页大小
      total: 0, // 查询总条数
      loading: false, // 滚动加载中
      finished: false, // 滚动加载完成
      isLoading: false, // 下拉强制刷新
    };
  },

list 组件，监听方法由 和 控制。

该组件由源头控制，监控方式为

分离出ajax函数获取数据，

// 获取数据列表
    fetchList() {
      return new Promise((resolve, reject) => {
        let para = {
          data: {
            confirm: false,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
          },
        };
        temperatureWarningList(para)
          .then((res) => {
            let result = {
              total: res.data.recordTotal,
              pageIndex: res.data.pageIndex,
              list: res.data.list,
            };
            resolve(result);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },

内容

 // 滚动加载更多
    onLoad() {
      this.loading = true;
      this.fetchList().then((res) => {
        if (res.list.length < this.pageSize) {
          // 数据小于10条，已全部加载完毕finished设置为true
          this.finished = true;
        }
        if (res.list.length === 0) {
          // 数据返回为空，表示没有数据了
          this.loading = false;
          this.finished = true;
        }
        // fix第二页数据未加载完成就强制下拉刷新，导致上一次的第二页的数据跑到这一次第一页的数据的前面的bug
        if (this.pageIndex == res.pageIndex) {
          this.pageIndex = res.pageIndex + 1;
          this.list = this.list.concat(res.list);
        }
        this.loading = false;
      });
    },

内容

// 下拉刷新
    onRefresh() {
      this.list = [];
      this.pageIndex = 1;
      this.finished = false;
      this.loading = true;
      this.onLoad();
      this.isLoading = false; // 下拉加载完成，关闭，不然就会有两个显示加载中的转圈圈。list本身就有一个了。啊。好恶心。
    },

如果拉取的内容不是全屏，则需要重写van-pull-style，用命名空间覆盖或者重写。 我这里是因为我自己的样式是在vant的样式之后引入的，添加也能生效。 如果不行，就写一个没有它的样式，然后在它外面包装一个类名作为命名空间。

<style lang="less" scoped>
.van-pull-refresh {
  min-height: calc(100vh - 46px);
}
</style>

如果你有更好的方法并愿意分享你的想法，请跪下。

时间比较紧，暂时就这样吧。

以后如果有更好的解决方案，我会再次更新。 把它记录下来。

只是想使用方法

data() {
      return {
        offset:0,//滚动条与底部距离小于 offset 时触发load事件，默认300
        pageNo: 1, // 当前页码
        pageSize: 10, // 分页大小
        total: 0, // 查询总条数
        loading: false, // 滚动加载中
        finished: false, // 滚动加载完成
        list:[ ],
      };
    },
<van-list
      v-model="loading"
      :finished="finished"
      :offset="offset"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="onLoad"
    >
    	<p  v-for="(item, index) in list" :key="index>{{item.name}}</p>
</vant-list>
getDutyList() {
        return new Promise((resolve, reject) => {
          let params = {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
          };
          this.axios.get(params).then((res) => {
            if (res.data.status == 0) {
                  if (res.data.data.resultData.length > 0) {
                    let result = {
                      total: res.data.data.total,
                      pageNo: res.data.data.pageNo,
                      data: res.data.data.resultData,
                    };
                    resolve(result);
              }
            }
          }).catch((err) => {
            reject(err);
          });
        })
      },
      // 滚动加载更多
      onLoad() {
        this.loading = true;
        this.getDutyList().then((res) => {
          this.list= this.list.concat(res.data);
          if (this.list.length>=res.total) {
            this.finished = true;
          } else {
            this.finished = false;
            this.pageNo += 1
          }
          this.loading = false
        });
      },

注意：关闭 :-check="false" 设置后，需要手动触发第一个方法。 手动调用。