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


Posted in Javascript onNovember 11, 2020

前几天做的项目里有用到下拉刷新。使用了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/icon_kong_dingdan@2x.png"/>
   <div>暂无预约~</div>
  </div>

loading为false是加载中,finished为true是已结束状态,onLoad是执行函数(分页添加list的值),里面的v-bookOrder是自己写的组件。

初始化loading为false,finished为false。

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

一切ok。

但项目里,加载的list,页面上有个切换的tab,实现切换不同的类型,加载不同的list的功能。vant-ui的list就有个bug,当切换tab的时候,它的onload没方法自动触发。然而在当前标签页,如果列表已经加载完毕再去切换,onload就可以实现自动触发。(很多人给官方提这个问题,但是官方就是不修改)。

vant-ui框架的一个bug(解决切换后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不触发)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
使用Vant完成Dialog弹框案例
Nov 11 #Javascript
vue实现lodop打印功能的示例
Nov 11 #Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 #Javascript
vue mvvm数据响应实现
Nov 11 #Javascript
Js数组扁平化实现方法代码总汇
Nov 11 #Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 #Javascript
Vue3 响应式侦听与计算的实现
Nov 11 #Javascript
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
百度地图API使用方法详解
2015/08/25 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
php实现的顺序线性表示例
2019/05/04 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python进行参数传递的方法
2020/05/12 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
运动会领导邀请函
2014/01/10 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
Nginx安装配置详解
2022/06/25 Servers