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>

知識を補充します：VANtはvueの中で必要によって導入して全部ロードします。
1.問題の説明：
Vue-cli 2.x足場でvantコンポーネントライブラリの使用を練習して、main.jsでコンポーネントに使う時にVant is not definedを間違えました。
テスト練習vantですから。demoはすべてのロードと必要に応じて2つの方法をロードします。
必要に応じてロードする
1.まずVue足場を構築し、
2.vantをダウンロードする
3.babel-plugin-mportをダウンロードする（必要に応じてロードして使用する）
3.ダウンロードしたら.vueファイルで使用できます。
ダウンロードvant:cnpm install vant-S
babel-plug-inmportをダウンロードします。cnpm install babel-plug-inmport-S
最初の導入:

import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);

私の書き方：

<template>
 <van-popup v-model="show" position="top" :style="{ height: '30%' }" />
  <van-cell-group>
   <van-cell title="   " value="  " />
   <van-cell title="   " value="  " label="    " />
  </van-cell-group>
</template>
<script>
import { Popup } from "vant";
import { Cell, CellGroup } from "vant";

components:{
  [Cell.name]: Cell,
  [CellGroup.name]: CellGroup,
}
</script>

みんなは属性を計算する中であなたの導入した部品を印刷してもいいです。中に何がありますか？
すべて読み込み
ステップ1：vue足場をダウンロードします。
vue init webpackプロジェクト名；
ステップ2：vantをダウンロードする
cnpm install vant-S
main.jsで導入して使用します。

import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant);

-未修正前の.babelrcファイル

{
 "presets": [
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 "plugins": ["transform-vue-jsx", "transform-runtime"]
}

ステップ3：babel-plug-inmportをインストールします。（これは必要に応じてロードする時に必要なものです。全部導入したらいらないです。）
cnpm install babel-plug-i-mport-S
-babel-plugin-mportをダウンロードして修正.babelrcのファイル

{
 "presets": [
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 "plugins": ["transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}]],
 "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
  }
 }
}

第四に、babel-plug-in-mportをインストールしたら、これをアンインストールして、プロジェクトを再構築する必要があります。babel-plug-in-mportをあなたがアンインストールする時.babelrcというファイルも最初は修正されていない状態に戻します。
cnpm uninstall babel-plug-i-mport-S
次にプロジェクトを再起動すればいいです。
以上のvueはvantプラグインを使ってtabs切り替えと無限ローディング機能を実現しました。つまり、小編集は皆さんに提供した内容を全部共有しています。