vant-ui框架的一个bug(解决切换后onload不触发)
前几天做的项目里有用到下拉刷新。使用了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="/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不触发)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
下一篇:使用Vant完成Dialog弹框案例