vant 上拉加载/下拉刷新(van-list、van-pull

以下面代码为例，通过其中的3个属性、2个函数，说一下核心知识点：
1、写在<van-pull-refresh>中的searchRefreshing属性，是下拉刷新时专用的，值有两个true/false;
searchRefreshing设置为true，表示下拉刷新完毕，列表顶部的"加载中..."会隐藏；
searchRefreshing设置为false，表示正在下拉刷新，列表顶部的"加载中..."会显示

image.png
2、写在<van-list>中的searchLoading属性，是上拉加载时专用的，值有两个true/false;
searchLoading设置为true，表示上拉加载完毕，列表底部的"加载中..."会隐藏；
searchLoading设置为false，表示正在上拉加载，列表底部的"加载中..."会显示。
image.png
3、写在<van-list>中的searchFinshed属性，表示数据是否已全部加载完毕，值有两个true/false。特别注意的是，当searchFinshed为true时，列表底部会显示finished-text中的自定义的值没有更多了，且其为true时，searchLoading无论是false/true，都不会在列表底部显示"加载中..."，只会在列表底部显示没有更多了，因此这种情况可以理解为，searchFinshed会使searchLoading失效。
image.png
4、写在<van-pull-refresh>中的searchOnRefresh函数，下拉刷新时调用。
5、写在<van-list>中的searchOnLoad函数，上拉加载时调用。
1、2的共同点：两个属性值都是通过v-model控制的，只有true/false两个值，都是控制"加载中..."的隐藏显示。
1、2的不同点：一个是在列表的顶部显示，一个是在列表的底部显示。

核心代码

<template>
  <div>
    <div class="top_search_btn" @click="topSearchFunc">搜索</div>
    <van-pull-refresh  v-model="searchRefreshing" @refresh="searchOnRefresh">
      <van-list v-model="searchLoading" :finished="searchFinshed" finished-text="没有更多了" @load="searchOnLoad">
        <div class="top_store_search_content" v-for="(item, index) in topSearchStoreList" :key="index"
          @click="searchResultClick(item)">
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getStoreListForWLMapAPI } from "../api/index.js";
import { Toast } from "vant";

export default {
  name: "home",
  data() {
    return {
      pageSize:10,
      topSearchStoreList: [],
      topSearchPageNum: 1,
      searchLoading: false,
      searchFinshed: false,
      searchRefreshing: false, 
    };
  },
  methods: {
    searchOnRefresh() {// 下拉刷新时调用
      this.topSearchPageNum = 1;
      this.searchFinshed = false;// 每次下拉刷新，要将searchFinshed置为false
      this.getTopSearchStoreListFunc();
    },
    searchOnLoad() {// 滚动到底部时，会触发 searchOnLoad 事件并将 searchLoading 设置成 true
      this.searchLoading = true;
      this.topSearchPageNum++;
      this.getTopSearchStoreListFunc();
    },
    topSearchFunc() {
      console.log("顶部搜索点击---");
      document.documentElement.scrollTop=0
      this.topSearchPageNum = 1;
      this.searchLoading = true;
      // 之前如果数据全部加载完毕(searchFinshed为true)，本次又点击了搜索，必须要重新将searchFinshed置为false
      // 否则会出现，加载完第一页的数据之后，第二页就部进行数据请求了
      this.searchFinshed = false;
      this.getTopSearchStoreListFunc();
    },

    getTopSearchStoreListFunc() {
      var that = this;
      var jsonParams = {
        pageNum: this.topSearchPageNum,
        pageSize: this.pageSize,
        storeName: this.inputAddress,
        xpoint: this.currentLng ? this.currentLng : 117.326541,
        ypoint: this.currentLat ? this.currentLat : 34.810264,
        mapCenterXpoint: this.mapCenterXpoint ? this.mapCenterXpoint : 117.326541,
        mapCenterYpoint: this.mapCenterYpoint ? this.mapCenterYpoint : 34.810264,
        distance: ""
      };

      getStoreListForWLMapAPI(jsonParams).then(res => {
        if (res.status != 200) {
          Toast.fail(res.msg);
          return;
        }
        this.topSearchTotalData = res.data.totalData;
        if (res.data.result_list.length == 0) {// 本次没有数据
          if (this.topSearchPageNum > 1) {// 不是第一页，上拉加载
            this.searchFinshed = true;// 数据全部加载完毕
          } else {// 第一页，下拉刷新
            this.topSearchStoreList = "";

            Toast.fail('暂无数据');
            this.searchRefreshing = false;
          }
        }else{// 本次有数据
          if (this.topSearchPageNum > 1) {// 不是第一页，上拉加载
            this.topSearchStoreList = [
              ...this.topSearchStoreList,
              ...res.data.result_list
            ];
          }else{// 第一页，下拉刷新
            this.topSearchStoreList = res.data.result_list;
            this.searchRefreshing = false;
          }
          if(res.data.result_list.length<this.pageSize){  // 本次拿到的数据小于每页的最大条数，则后面的页肯定也没数据了
            this.searchFinshed = true;// 数据全部加载完毕
          }
          this.searchLoading = false;// 本次数据更新完毕，searchLoading置为false
        }
      });
    },
  },
  mounted() {

  }
};
</script>
<style lang="less" scoped>

</style>