最简单的Vue使用Vant库的上拉加载下拉刷新

首先肯定是获取接口渲染页面

<div class="AnnounList" v-if="mentList.length>0">
        <ul>
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <router-link
                :to="{path:'/index/announ_details',query:{id:item.article_id}}"
                tag="li"
                v-for="(item,index) in mentList"
                :key="index"
              >
                <img src="./images/radio.png" alt class="mentSrc" />
                <div>
                  <p>{{item.title}}</p>
                  <span>{{item.add_time}}</span>
                </div>
                <img src="./images/right.png" alt class="mentRight" />
              </router-link>
            </van-list>
          </van-pull-refresh>
        </ul>
      </div>

JS

获取后台数据
data里面的数据

data() {
    return {
      mentList: [],
      isLoading: false,
      loading: false,
      finished: false,
      offset: 0,
      energy: {
        page_size: 10,
        page: 1
      }
    };
  },

这个是上拉刷新

onLoad() {
      this.energy.page += 1;
      /*  this.offset = this.energy.page_size * this.energy.page; */
      this.cementList();
    }

 //公告列表
    cementList() {
      service.annList(this.energy).then(res => {
        if (res.data.code == "10000") {
          this.loading = false;
          if (this.energy.page <= 1) this.mentList = [];
          this.mentList.push(...res.data.result);
          if (res.data.result.length < this.energy.page_size)
            this.finished = true;
        }
      });
    },

这个是下拉加载

 onRefresh() {
      setTimeout(() => {
        this.$Toast("刷新成功");
        this.isLoading = false;
        this.energy.page = 1;
        this.cementList();
      }, 1000);
    },
    mounted() {
    this.cementList();
  }