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 相关文章推荐
浮动的div自适应居中显示的js代码
Dec 23 Javascript
js中switch case循环实例代码
Dec 30 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 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判断指定时间段的2个方法
2014/03/14 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
超级强大的表单验证
2006/06/26 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
python代码过长的换行方法
2018/07/19 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
python如何导入依赖包
2020/07/13 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
2013的个人自我评价
2013/12/26 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
海洋天堂观后感
2015/06/05 职场文书
高一作文之乐趣
2019/11/21 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
Python实现socket库网络通信套接字
2021/06/04 Python
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技