Vant实现 下拉刷新，上拉加载

引入Vant

npm i vant -S

没废话，直接上代码。 最后有一个附带的实际项目案例可以下载参考一下。

<template>

  <div>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

      <van-list v-model="isUpLoading" :finished="upFinished" @load="onLoad"

        :offset="offset" finished-text="我也是有底线的~~~"

      >

        <div class="content">

          <!-- 自定义内容 -->

          <ul>

            <li v-for="(item, index) in datacontent" :key="index">

              <div class="left">

                <p class="rank">{{item.rank}}</p>

                <p class="score">

                  分数：

                  <br />

                  <span>{{item.score}}</span>

                </p>

                <p class="title">{{item.title}}</p>

                <p class="classify">{{item.classify}}</p>

                <p class="author">{{item.author}}</p>

                <p class="date">{{item.date}}</p>

              </div>

            </li>

          </ul>

        </div>

      </van-list>

    </van-pull-refresh>

  </div>

</template>

<script>

export default {

  data() {

    return {

      data: [  ], //自己定义的数组，里面存放数据，用于v-for循环

      datacontent: [], //空数组，用来储存循环出来的内容，因为没有造假数据，所以就反复循环这个数组里的内容了，懒～～～嘻嘻

      isLoading: false, //下拉刷新

      isUpLoading: false, //上拉加载

      upFinished: false, //上拉加载完毕

      finished: false,

      offset: 100 //滚动条与底部距离小于 offset 时触发load事件

    };

  },

  mounted() {

    for (var i = 0; i < 2; i++) {

      this.datacontent.push(this.data[i]); //页面一加载我就循环出来五条放进去

    }

  },

  methods: {

    // 下拉调用此函数

    onRefresh() {

      setTimeout(() => {

        this.$toast("刷新成功"); //弹出

        this.isLoading = false;

      }, 500);

    },

    // 上拉调用此函数

    onLoad() {

      setTimeout(() => {

        this.$toast("加载成功"); //弹出

        this.isUpLoading = false;

        for (var i = 0; i < 1; i++) {

          this.datacontent.push(this.data[i]); // 上拉时循环出来这个数组的三条内容，放入datacontent这个数组里，那样就一直拉一直加

        }

      }, 500);

      // 加载完成时底部提示加载完成，禁止上拉加载。延迟器是为了避免和加载中同时执行

      setTimeout(() => {

        if (this.datacontent.length >= 10) {

          this.upFinished = true;

        } else {

          this.upFinished = false;

        }

      }, 1000);

    }

  }

};
</script>
<style lang="less" scoped>
  .van-pull-refresh{
    .left {
      overflow: hidden;
      p {
      width: 30px;
      float: left;
    }
    }
  }
</style>

vant官方地址：https://youzan.github.io/vant/#/zh-CN/pull-refresh#dai-ma-yan-shi

优化简化版：

<template>
  <div class="information">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="isUpLoading"
        :finished="upFinished"
        @load="onLoad"
        :offset="offset"
        :finished-text="textBottom"
      >
       //内容
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      companyList: [],
      isLoading: false, //下拉刷新
      isUpLoading: false, //上拉加载
      upFinished: false, //上拉加载完毕
      finished: false,
      offset: 100, //滚动条与底部距离小于 offset 时触发load事件
      pages: 0,
      textBottom: "" //底部内容文字
    };
  },
  mounted() {
    this.compactInfo();
  },
  methods: {
    // 下拉调用此函数
    onRefresh() {
      setTimeout(() => {
        // this.$toast("刷新成功"); //弹出
        this.isLoading = false;
      }, 500);
    },
    // 上拉调用此函数
    onLoad() {
      setTimeout(() => {
        this.isUpLoading = false;
        this.compactInfo();
      }, 500);
    },
   //加载的数据
    compactInfo() {
      this.pages++;
      this.$axios
        .get("接口地址")
        .then(res => {
          if (res.data.status == "200") {
            let lists = res.data.body.records;
            if (lists.length == "0") {
              this.upFinished = true;
            } else {
              this.upFinished = false;
            }
            for (var i = 0; i < lists.length; i++) {
              this.companyList.push(lists[i]); // 上拉时循环出来这个数组的三条内容，放入datacontent这个数组里，那样就一直拉一直加
            }
            if (this.companyList.length > 7) {
              this.textBottom = "我也是有底线的~~~";
            }
          } else {
            Toast({
              message: res.data.title,
              position: "center",
              duration: 1000
            });
          }
        });
    },
    
  }
};
</script>