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 相关文章推荐
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
js实现小星星游戏
Mar 23 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
简单实现js页面切换功能
2021/01/10 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
Python读取指定日期邮件的实例
2019/02/01 Python
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
学校岗位设置方案
2014/01/16 职场文书
公司委托书范本
2014/04/04 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
聘任合同书
2015/09/21 职场文书
教你用python控制安卓手机
2021/05/13 Python
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL