vue中使用vant插件做tabs切換和無限加載功能

1.創建vue項目，不再詳述

2.引入vant
之前用過很多插件做這個功能，但是效果都不盡人意，出現各種問題，直到遇到vant這個插件，完美的解決了這些小問題，如有問題，歡迎聯繫我
安裝依賴

npm i vant -S

在main.js中引入

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

3.在頁面中使用
官方寫的比我寫的好多了，大家可以借鑑，看源代碼可能比官方給的文檔更直觀

官方文檔
組件源代碼

我在文件中的使用，沒有使用下拉刷新的功能，大家可以直接看官網代碼：

<template>
  <div class="myOffice">
    <van-tabs v-model="active">
        <van-tab title="預受理">
          <van-list v-model="loading1" :finished="finished1" finished-text="沒有更多了" @load="onLoad1" :error.sync="error1" error-text="請求失敗，點擊重新加載">
            <van-cell v-for="(item,index) in list1" :key="item.PROJID" @click="handle('1',index)">
              <div class="num">{{item.PROJID}}</div>
              <div class="name">{{item.SERVICENAME}}</div>
              <div class="cleatFloat detailInfo">
                <div class="floatLeft deptName">
                  <i></i>
                  <span>{{item.DEPTNAME}}</span>
                </div>
                <div class="floatRight time">
                  <i></i>
                  <span>{{item.ACCEPTTIME.slice(0,item.ACCEPTTIME.length-2)}}</span>
                </div>
              </div>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="正在處理">
          <van-list v-model="loading2" :finished="finished2" finished-text="沒有更多了" @load="onLoad2" :error.sync="error2" error-text="請求失敗，點擊重新加載">
            <van-cell v-for="(item,index) in list2" :key="item.flowroleid" @click="handle('2',index)">
              <div class="num">{{item.PROJID}}</div>
              <div class="name">{{item.SERVICENAME}}</div>
              <div class="cleatFloat detailInfo">
                <div class="floatLeft deptName">
                  <i></i>
                  <span>{{item.DEPTNAME}}</span>
                </div>
                <div class="floatRight time">
                  <i></i>
                  <span>{{item.ACCEPTTIME.slice(0,item.ACCEPTTIME.length-2)}}</span>
                </div>
              </div>
            </van-cell>
          </van-list>
        </van-tab>
      </van-tabs>
  </div>
</template>

<script>
export default {
  name:'MyOffice',
  data(){
    return {
      active: 0,
      list1: [],
      loading1: false,
      finished1: false,
      error1: false,
      page1: 1,
      list2: [],
      loading2: false,
      finished2: false,
      error2: false,
      page2: 1
    }
  },
  methods:{
    onLoad1(){
      var _vm = this;
      _vm.param.pageNo = _vm.page1;
      _vm.param.handleState = '1';
      _vm.axios.post('*************',_vm.param).then(response => {
        _vm.page1 ++;
        var moreList = response.data.data.data;
        if(moreList){
          _vm.list1.push(...moreList);
          _vm.loading1 = false;
          _vm.finished1 = false;
        }else{
          _vm.loading1 = false;
          _vm.finished1 = true;
        }
      }).catch(error => {
        _vm.error1 = true;
        _vm.loading1 = false;
      })
    },
    onLoad2(){
      var _vm = this;
      _vm.param.pageNo = _vm.page2;
      _vm.param.handleState = '2';
      _vm.axios.post('******************',_vm.param).then(response => {
        _vm.page2 ++;
        var moreList = response.data.data.data;
        if(moreList){
          _vm.list2.push(...moreList);
          _vm.loading2 = false;
          _vm.finished2 = false;
        }else{
          _vm.loading2 = false;
          _vm.finished2 = true;
        }
      }).catch(error => {
        console.log(error);
        _vm.error2 = true;
        _vm.loading2 = false;
      })
    },
    handle(type,index){
      this.$router.push('/itemDetail?type=' + type + '&index=' + index);
    }
  }
}
</script>