vant-ui框架的一个bug(解决切换后onload不触发)

# 安装 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']
 ]
};

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

  <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="/UploadFiles/2021-04-02/icon_kong_dingdan@2x.png">

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不触发)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。