Vant 之 封装下拉刷新，上拉加载更多

没什么好说的，直接上代码，冲冲冲

1.HTML代码      使用vant中的List和PullRefresh组件即可

<template>
  <div class="profly-layout">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="isLoading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="item" v-for="(item, index) in dataList" :key="index">
          {
   
   { item }}
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

2.JS代码

<script>
export default {
  name: "profly",
  props: {},
  components: {},
  data() {
    return {
      //监听触发时，会自动变为true，因为第一次是代码触发，所以设定为true
      isLoading: true, //是否处于加载状态
      finished: false, //是否加载完成
      hasNextPage: true, //是否还有下一页数据
      dataList: [], //数据列表
      page: 0, //当前第几页数据
      pageSize: 5, //每页请求的数量
      refreshing: false, //当前是否刷新重置信息
    };
  },
  methods: {
    /**
     * 监听方法
     */
    // 上拉加载更多
    onLoad() {
      this.getData();
      console.log(123123);
    },
    //下拉刷新
    onRefresh() {
      this.finished = false;
      // 将 loading 设置为 true，表示处于加载状态
      this.isLoading = true;
      this.getData();
    },
    /**
     * 请求数据
     */
    //获取数据
    async getData() {
      //下拉刷新
      if (this.refreshing) {
        this.dataList = [];
        this.refreshing = false;
        this.page = 0;
        this.hasNextPage = true;
      }
      /**
       * 上拉加载
       */
      //一进这个方法,vant内部会把isLoading设置为true    this.isLoading = true
      // 如果没有下一页的数据，设定成加载完成,结束请求
      if (this.hasNextPage === false) {
        return (this.finished = true);
      }
      //每次让页面页数+1
      let tempPage = this.page + 1;
      let params = {
        page: tempPage,
        pageSize: this.pageSize,
      };

      //设定只有5页的数据
      if (tempPage === 6) {
        this.hasNextPage = false;
        this.finished = true;
        return;
      }
      // 一般这样请求，我这里模拟一下
      // const { data: res } = await getData(params)
      setTimeout(() => {
        let tempArr = [
          "a",
          "b",
          "c",
          "d",
          "e",
          "f",
          "g",
          "h",
          "i",
          "j",
          "k",
          "l",
          "f",
        ];
        this.dataList.push(...tempArr);
        console.log(this.dataList);

        //把当前page值改变
        this.page = tempPage;
        //改为没在加载状态
        this.isLoading = false;
        this.refreshing = false;
      }, 100);
    },
  },
  mounted() {
    this.getData();
  },
  computed: {},
  watch: {},
  filters: {},
};
</script>

3.CSS代码   方便看效果

<style lang='less' scoped>
.profly-layout {
  .item {
    width: 100%;
    height: 30px;
    border: 1px solid blue;
    margin-bottom: 20px;
    text-align: center;
    line-height: 30px;
    box-sizing: border-box;
  }
}
</style>