前幾天做的專案裡有用到下拉重新整理。使用了vant-ui裡的

List 列表

瀑布流滾動載入，用於控制長列表的展示

先說使用

1.用npm下載該模組包

npm i vant -S

2.引入元件

官方提供了三種方法。（我使用了第三種，全域性引入方法）

方式一. 使用 babel-plugin-import (推薦)

babel-plugin-import 是一款 babel 外掛，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

# 安裝 babel-plugin-import 外掛
npm i babel-plugin-import -D
// .babelrc 中配置
// 注意：webpack 1 無需設定 libraryDirectory
{
 "plugins": [
 ["import",{
  "libraryName": "vant","libraryDirectory": "es","style": true
 }]
 ]
}
 
// 對於使用 babel7 的使用者，可以在 babel.config.js 中配置
module.exports = {
 plugins: [
 ['import',{
  libraryName: 'vant',libraryDirectory: 'es',style: true
 },'vant']
 ]
};

接著你可以在程式碼中直接引入 Vant 元件，外掛會自動將程式碼轉化為方式二中的按需引入形式

import { Button,Cell } from 'vant';

如果你在使用 TypeScript，可以使用 ts-import-plugin 實現按需引入

方式二. 按需引入元件

在不使用外掛的情況下，可以手動引入需要的元件

import Button from 'vant/lib/button';

import 'vant/lib/button/style';

方式三. 匯入所有元件（在main.js中引入）

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

注意：配置 babel-plugin-import 外掛後將不允許匯入所有元件

引入成功後使用

  <van-list
   v-model="loading"
   :finished="finished"
   @load="onLoad">
   <v-bookOrder 
    :list="list" 
    :type="type" 
    :idType="idType"
    @reflush = "submitHandler">
   </v-bookOrder>
  </van-list>
  <!-- //空頁面 -->
  <div class="empty" v-if="list.length==0&&!loading">
   <img src="../../assets/[email protected]"/>
   <div>暫無預約～</div>
  </div>

loading為false是載入中，finished為true是已結束狀態，onLoad是執行函式（分頁新增list的值），裡面的v-bookOrder是自己寫的元件。

初始化loading為false,finished為false。

一切ok。

但專案裡，載入的list，頁面上有個切換的tab,實現切換不同的型別，載入不同的list的功能。vant-ui的list就有個bug，當切換tab的時候，它的onload沒方法自動觸發。然而在當前標籤頁，如果列表已經載入完畢再去切換，onload就可以實現自動觸發。（很多人給官方提這個問題，但是官方就是不修改）。

下面給出解決方案。

在切換tab後執行初始化函式

initialization(){
   this.list = [];
   this.page = 1;
   this.loading = true;//下拉載入中
   this.finished = false;//下拉結束
   if(this.loading){
    this.onLoad();
   }
  },

list清空，page=1表示第一頁,將loading設定為true，一定觸發一次onload，

onLoad() {
   setTimeout(async () => {
    let res = await this.$ajax.get({
     limit:this.pageSize,page:this.page,keyword:this.value1
    },'/order/businesslist/'+this.type,res=>{
     if(res.code==0){
      this.list = this.list.concat(res.data.list)
      this.loading = false;
      if(this.list.length >= res.data.total){
       this.finished = true;
      }
      this.page++;
     }
    else{
     this.$dialog.toast({
      mes: res.msg,timeout: 1500
     });
    }},err=>{
     this.$dialog.toast({
      mes: "出錯了~",timeout: 1500
     });
    })  
   },500);
  },

在第一次onload的過程中將loading設定為false，則觸發第二次loading，當執行到滿足結束條件的時候，finished為true,結束載入。bug就解決啦~

補充知識：vant 框架van-list重複觸發載入函式的問題

在使用van-list元件的時候，為了隱藏ios手機右側的滾動條，我給了元件一個overflow-x:hidden屬性，官方說這個屬性會導致重複觸發van-list的載入，

但是我去掉這個屬性仍然不管用，而且這個屬性又是必須保留的，最後我又給了他一個固定的高度，就不會重複觸發載入了，注意一定要是固定的高度，

設定height:100%仍然是不管用的，記錄一下這個問題。

以上這篇vant-ui框架的一個bug(解決切換後onload不觸發)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。