前幾天做的項(xiàng)目里有用到下拉刷新。使用了vant-ui里的

List 列表

瀑布流滾動(dòng)加載，用于控制長(zhǎng)列表的展示

先說(shuō)使用

1.用npm下載該模塊包

npm i vant -S

2.引入組件

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

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

babel-plugin-import 是一款 babel 插件，它會(huì)在編譯過程中將 import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式

# 安裝 babel-plugin-import 插件
npm i babel-plugin-import -D
// .babelrc 中配置
// 注意：webpack 1 無(wú)需設(shè)置 libraryDirectory
{
 "plugins": [
 ["import", {
  "libraryName": "vant",
  "libraryDirectory": "es",
  "style": true
 }]
 ]
}
 
// 對(duì)于使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
 plugins: [
 ['import', {
  libraryName: 'vant',
  libraryDirectory: 'es',
  style: true
 }, 'vant']
 ]
};

接著你可以在代碼中直接引入 Vant 組件，插件會(huì)自動(dòng)將代碼轉(zhuǎn)化為方式二中的按需引入形式

import { Button, Cell } from 'vant';

如果你在使用 TypeScript，可以使用 ts-import-plugin 實(shí)現(xiàn)按需引入

方式二. 按需引入組件

在不使用插件的情況下，可以手動(dòng)引入需要的組件

import Button from 'vant/lib/button';

import 'vant/lib/button/style';

方式三. 導(dǎo)入所有組件（在main.js中引入）

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

注意：配置 babel-plugin-import 插件后將不允許導(dǎo)入所有組件

引入成功后使用

  <van-list
   v-model="loading"
   :finished="finished"
   @load="onLoad">
   <v-bookOrder 
    :list="list" 
    :type="type" 
    :idType="idType"
    @reflush = "submitHandler">
   </v-bookOrder>
  </van-list>
  <!-- //空頁(yè)面 -->
  <div class="empty" v-if="list.length==0&&!loading">
   <img src="../../assets/icon_kong_dingdan@2x.png"/>
   <div>暫無(wú)預(yù)約～</div>
  </div>

loading為false是加載中，finished為true是已結(jié)束狀態(tài)，onLoad是執(zhí)行函數(shù)（分頁(yè)添加list的值），里面的v-bookOrder是自己寫的組件。

初始化loading為false,finished為false。

一切ok。

但項(xiàng)目里，加載的list，頁(yè)面上有個(gè)切換的tab,實(shí)現(xiàn)切換不同的類型，加載不同的list的功能。vant-ui的list就有個(gè)bug，當(dāng)切換tab的時(shí)候，它的onload沒方法自動(dòng)觸發(fā)。然而在當(dāng)前標(biāo)簽頁(yè)，如果列表已經(jīng)加載完畢再去切換，onload就可以實(shí)現(xiàn)自動(dòng)觸發(fā)。（很多人給官方提這個(gè)問題，但是官方就是不修改）。

下面給出解決方案。

在切換tab后執(zhí)行初始化函數(shù)

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

list清空，page=1表示第一頁(yè),將loading設(shè)置為true，一定觸發(fā)一次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: "出錯(cuò)了~",
      timeout: 1500
     });
    })  
   }, 500);
  },

在第一次onload的過程中將loading設(shè)置為false，則觸發(fā)第二次loading，當(dāng)執(zhí)行到滿足結(jié)束條件的時(shí)候，finished為true,結(jié)束加載。bug就解決啦~

補(bǔ)充知識(shí)：vant 框架van-list重復(fù)觸發(fā)加載函數(shù)的問題

在使用van-list組件的時(shí)候，為了隱藏ios手機(jī)右側(cè)的滾動(dòng)條，我給了組件一個(gè)overflow-x:hidden屬性，官方說(shuō)這個(gè)屬性會(huì)導(dǎo)致重復(fù)觸發(fā)van-list的加載，

但是我去掉這個(gè)屬性仍然不管用，而且這個(gè)屬性又是必須保留的，最后我又給了他一個(gè)固定的高度，就不會(huì)重復(fù)觸發(fā)加載了，注意一定要是固定的高度，

設(shè)置height:100%仍然是不管用的，記錄一下這個(gè)問題。

以上這篇vant-ui框架的一個(gè)bug(解決切換后onload不觸發(fā))就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論