vant ui 下拉刷新，上拉加载更多

<template>
  <div class="companyCreditList">
    <van-nav-bar title="企业授权" left-arrow  @click-left="onClickLeft" /> 
    <!-- <p class="noData" v-if="noData">没有更多数据了~</p> -->
    <van-pull-refresh id="pullRefresh" v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="1"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <van-cell  v-for="(item,index) in list" :key="item.id" :title="index" is-link :value="item.publish_date" /> 
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Http from '@/api/companyCredit/companyCredit.js'
export default {
  name: 'companyCreditList',
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      noData:false,
      page:{},
      pageIndex:1,
      pageTotal:1
    }
  },
  mounted(){
  },
  methods:{
    // 点击叉号返回结果页面
    onClickLeft(){
      this.$router.go(-1)
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        Http.testList(this.pageIndex).then((res) => {
          if (res.code == 1) {
            this.loading = false
            this.pageIndex++;
            if(this.list.length<1){
              this.list = res.data.inforList
            }else{
              this.list = this.list.concat(res.data.inforList)
            }
            this.pageTotal = res.data.page.total
            
          }
        })


        this.loading = false;

        if (this.list.length >= this.pageTotal) {
          this.finished = true;
        }
        this.loading = false;

        if (this.list.length >= this.pageTotal) {
          this.finished = true;
        }
      }, 1000);
      if(this.list.length>0){
        this.noData = false;
      }else{
        this.noData = true;
      }
      
    },
    onRefresh() {
      this.pageIndex = 1;
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad(); 
    },
   
  }
}
</script>

<style scoped>
.noData{margin-top: 20vh;color:#ccc;font-size: .7rem;text-align: center;}
</style>

第二种

<template>
  <div class="companyCreditList">
    <van-nav-bar title="企业授权" left-arrow  @click-left="onClickLeft" /> 
    <!-- <p class="noData" v-if="noData">没有更多数据了~</p> -->
    <van-pull-refresh class="van-pull-refresh" v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="1"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <van-cell  v-for="(item,index) in list" :key="item.id" :title="index" is-link :value="item.publish_date" /> 
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Http from '@/api/companyCredit/companyCredit.js'
export default {
  name: 'companyCreditList',
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      noData:false,
      page:{},
      pageIndex:1,
      pageTotal:0
    }
  },
  mounted(){
  },
  methods:{
    // 获取数据列表
    fetchList() {
      return new Promise((resolve, reject) => {
        Http.testList(this.pageIndex)
          .then((res) => {
            let result = {
              total: res.data.page.total,
              pageIndex: res.data.page.curPage,
              list: res.data.inforList,
            };
            resolve(result);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    // 点击叉号返回结果页面
    onClickLeft(){
      this.$router.go(-1)
    },
     // 滚动加载更多
    onLoad() {
      this.loading = true;
      this.fetchList().then((res) => {
        if (res.list.length < this.pageSize) {
          // 数据小于10条，已全部加载完毕finished设置为true
          this.finished = true;
        }
        if (res.list.length === 0) {
          // 数据返回为空，表示没有数据了
          this.loading = false;
          this.finished = true;
        }
        // fix第二页数据未加载完成就强制下拉刷新，导致上一次的第二页的数据跑到这一次第一页的数据的前面的bug
        if (this.pageIndex == res.pageIndex) {
          this.pageIndex = res.pageIndex + 1;
          this.list = this.list.concat(res.list);
        }
        this.loading = false;
      });
    },
    // 下拉刷新
    onRefresh() {
      this.list = [];
      this.pageIndex = 1;
      this.finished = false;
      this.loading = true;
      this.onLoad();
      this.refreshing = false; // 下拉加载完成，关闭，不然就会有两个显示加载中的转圈圈。list本身就有一个了。啊。好恶心。
    },   
   
  }
}
</script>

<style scoped>
.noData{margin-top: 20vh;color:#ccc;font-size: .7rem;text-align: center;}
.van-pull-refresh {
  min-height: calc(100vh - 46px);
}
</style>