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代码
Mar 27 Javascript
Open and Print a Word Document
Jun 15 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
vue解决跨域问题(推荐)
Nov 10 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
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
javascript 函数速查表
2010/02/07 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
Python 列表反转显示的四种方法
2020/11/16 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
以下的初始化有什么区别
2013/12/16 面试题
幼儿园小班植树节活动方案
2014/03/04 职场文书
企业文化宣传标语
2014/06/09 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
医德医风自我评价
2014/09/19 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
通知怎么写?
2019/04/17 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang