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>