基于vue2+vant，实现tab切换底部数据上拉加载

<template>
<div>
<van-tabs v-model="active" animated line-width="100" title-active-color='#262626' color='#00BF7F' @click="onClick">
<van-tab v-for="(index) in listName" :title="index" />
</van-tabs>

<div class='home-main-txt'>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
      @load="onLoad">
      <div v-for="(item, index) in shopInfo" :key="index">
        <div class="table-row">

          <span class="table-cell">{{ item.couponName }}</span>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</div>

</div>
</template>

<script>
import axios from 'axios';
export default {
data() {
return {
pageNo: 1,
pageSize: 10,
loading: false,
finished: false,
active: '',
listName: [
"1", "2", "3", "4"
],
shopInfo: [], // 接口传过来数组
type: 1, // tab类型的判断
refreshing: false,
};
},
methods: {
// 切换Tab时改变的值
onClick(index, name) {
this.type = name
this.pageNo = 1 //由于数据量很大，这里页数需要重置为第一页
this.loading = false; // 将loading状态设为false
this.finished = false;
this.shopInfo = []; //接口数据清空
},

// 调用接口数据
getList() {

  axios.get(`接口?current=${this.pageNo}&size=${this.pageSize}&couponStatus=${this.type}`, {
    headers: {
      "Content-Type": "application/json",
      lineId: this.lineID,
      lineId: 'U2497a5a6ca953af34fa613dae6521a64'
    }
  }).then((res) => {

    // 空数据 停止加载
    if (res.data.data.records.length == 0) {
      this.shopInfo = [];
      this.finished = true;
      return;
    }

    // 有数据 赋值列表 加载状态结束
    res.data.data.records.forEach(item => {
      this.finished = false
      this.shopInfo.push(item)
    })

    this.loading = false;
    this.refreshing = false;

    // 如果list长度大于等于总数据条数，数据全部加载完成
    if (this.shopInfo.length >= res.data.data.total) {
      this.finished = true;//结束加载
    }


  }).catch((err) => {
    console.log('err', err);
  })
},


// 若加载条到了底部
onLoad() {
  this.getList();                   // 调用上面方法,请求数据
  this.pageNo++;                    // 分页数加一
},

// 加载失败调用方法
onRefresh() {
  this.finished = false;            // 清空列表数据
  this.refreshing = true;
  this.loading = true;          // 加载状态
  this.pageNo = 1;              // 分页数赋值为1
  this.shopInfo = [];               // 清空数组
  this.onLoad();                    // 重新加载数据
},

}
};
</script>