樣例：

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',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分為 全部載入 和按需載入兩種方式

按需載入

1.首先搭建vue腳手架,

2.下載vant

3. 下載 babel-plugin-import (按需載入使用)

3.當下載好了以後,就可以在 .vue檔案中使用了

下載vant: cnpm install vant -S

下載babel-plugin-import: cnpm install babel-plugin-import -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>

大家可以在計算屬性中列印一下你引入的元件,看看裡面有什麼了

全部載入

第一步: 下載vue腳手架

vue init webpack 專案名;

第二步: 下載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"]
}

第三步: 安裝babel-plugin-import (這部是按需載入的時候需要用到的,如果你全部引入了 就不需要)

cnpm install babel-plugin-import -S

-在 下載 babel-plugin-import 後修改 .babelrc的檔案

{
 "presets": [
  ["env","transform-runtime",["import",{"libraryName":"vant","style":true}]],"env": {
  "test": {
   "presets": ["env","stage-2"],"transform-es2015-modules-commonjs","dynamic-import-node"]
  }
 }
}

第四.如果你安裝了babel-plugin-import 這個 然後需要把這個解除安裝掉,然後重新專案; 在你解除安裝掉babel-plugin-import 這個的時候 .babelrc這個檔案也要恢復到一開始沒修改的樣子偶(就是上面的''未修改之前的 .babelrc 檔案)

cnpm uninstall babel-plugin-import -S

接下來重啟專案就應該可以了。

以上這篇vue 使用vant外掛做tabs切換和無限載入功能的實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。