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 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
DOM 高级编程
May 06 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
bootstrap datepicker的基本使用教程
Jul 09 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
终于听上了直流胆调频
2021/03/02 无线电
在PHP中执行系统外部命令
2006/10/09 PHP
php 团购折扣计算公式
2011/11/24 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python显示生日是星期几的方法
2015/05/27 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
学生就业推荐信
2013/11/13 职场文书
营业员实习自我鉴定
2013/12/07 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
《青山不老》教学反思
2016/02/22 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL