vant-ui实现下拉刷新和上拉加载

1. 引入vant

npm i vant -S

2. 源码

<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>
 
 
 
 

3. 简化版

<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>