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天然的迭代器
Oct 29 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
jQuery实现日历效果
Sep 11 jQuery
使用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中上传大体积文件时需要的设置
2006/10/09 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
php实现每日签到功能
2018/11/29 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
nodejs基础知识
2017/02/03 NodeJs
javascript实现下雨效果
2017/03/27 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python机器学习库xgboost的使用
2020/01/20 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
高中生社会实践心得体会
2016/01/14 职场文书