vant-ui框架的一个bug(解决切换后onload不触发)

前几天做的项目里有用到下拉刷新。使用了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。

一切ok。

但项目里，加载的list，页面上有个切换的tab,实现切换不同的类型，加载不同的list的功能。vant-ui的list就有个bug，当切换tab的时候，它的onload没方法自动触发。然而在当前标签页，如果列表已经加载完毕再去切换，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不触发)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Vant完成Dialog弹框案例

    效果展示: 完整代码: <template> <!-- 完成Dialog 弹框 --> <div id="dialog"> <van-button class="btn" type="primary" @click="TipDialog">提示弹出框</van-button> <van-button class="btn" type=&quo

  • Vant 在vue-cli 4.x中按需加载操作

    在vue-cli 4.x中使用vant出现的问题,在这里记录一下 一. 如果使用按需加载,需要下载babel-plugin-import转换一下,下载 babel-plugin-import cnpm install babel-plugin-import -D **二. 在根目录中找到 babel.config.js 文件 , 添加字段 ** "plugins": [ ["import",{ "libraryName":"vant&q

  • 解决vant的Toast组件时提示not defined的问题

    按照官方文档引入全局Toast组件,在methods里面定义函数执行函数时产生了报错: //定义的函数 handleClick(){ Toast('点击提示') } 报错信息 [Vue warn]: Error in v-on handler: "ReferenceError: Toast is not defined" 解决方法: handleClick(){ this.$toast('点击提示') } 补充知识:vue+vant移动端遇到的那些问题 1.项目引用了lib-flexi

  • vant组件中 dialog的确认按钮的回调事件操作

    不知道是不是我理解有问题,看了vant的组件库,他的文档是这样说的 然后我就绑定了事件 :confirm 结果他的触发机制是:加载页面时会触发,点击按钮打开模态框时会触发,点击确定会触发,点击取消也会触发. 经过查阅资料以后,可以绑定他一个事件:beforeClose 这个事件的回调 有两个参数, 第一个参数是来判断点击的是确认按钮还是取消按钮.第二个参数我感觉就是可以关闭模态框. 补充知识:修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属

  • 使用Vant完成通知栏Notify的提示操作

    效果: 代码展示: <template> <!-- 通知消息提示 --> <div id="notify"> <van-button type="primary" @click="toNotify" class="btn">顶部通知</van-button> </div> </template> <script> export de

  • 解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

    1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动 说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正常滑动,在安卓手机 上不能上下滑动:这现象并不是ios和安卓兼容性问题! 原因:设置了touch-action: none;这属性为局部或者全局属性,将这条属性注释即可正常滑动. 2.使用PullRefresh和List列表实现下拉刷新和上拉加载时出现的问题 问题1. 下拉刷新时在手机上,不论滑到任何位置,只要下拉就刷新 原因:滑

  • vant-ui框架的一个bug(解决切换后onload不触发)

    前几天做的项目里有用到下拉刷新.使用了vant-ui里的 List 列表 瀑布流滚动加载,用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法.(我使用了第三种,全局引入方法) 方式一. 使用 babel-plugin-import(推荐) babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装 babel-plugin-import 插件 np

  • 基于Vant UI框架实现时间段选择器

    基于Vant UI框架实现时间段选择器

    本文实例为大家分享了Vant UI框架实现时间段选择器的具体代码,供大家参考,具体内容如下 组件代码如下: <template> <van-picker :title="title" :show-toolbar="showToolbar" :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onC

  • IE6图片加载的一个BUG解决方法

    代码如下: 复制代码 代码如下: <!--[if IE 6]><script type="text/javascript"> try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} </script><![endif]--> 注:这个BUG以前就已经发现了,这里只是再次提出来. 更详细的说明可以参考下面的文章:IE6下默认不缓存背景图片,

  • 一个Pod调度失败后重新触发调度的所有情况分析

    目录 正文 flushUnschedulablePodsLeftover flushBackoffQCompleted 新加入节点 节点更新 已经存在的 Pod 发生变化 集群内有Pod删除 正文 在 k8s 中一个Pod由于某些原因调度失败后,会被放入调度失败队列,这个队列里面的Pod后面都怎么样了呢? 他们怎么样才能重新获取到”重新做人的机会“呢?这篇文章,我们从源码的角度来看看来龙去脉 在 k8s 中会起两个协程,定期把 backoffQ 和 unscheduledQ 里面的 Pod拿到a

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

  • PHP is_subclass_of函数的一个BUG和解决方法

    is_subclass_of的作用: 复制代码 代码如下: bool is_subclass_of ( object object, string class_name ) 如果对象 object 所属类是类 class_name 的子类,则返回 TRUE,否则返回 FALSE.注: 自 PHP 5.0.3 起也可以用一个字符串来指定 object 参数(类名). 使用例子: 复制代码 代码如下: #判断$className是否是$type的子类is_subclass_of($className

  • Yii框架参数化查询中IN查询只能查询一个的解决方法

    本文实例讲述了Yii框架参数化查询中IN查询只能查询一个的解决方法.分享给大家供大家参考,具体如下: 在yii框架中使用参数化进行IN查询时,结果不如所愿 $sql =<<<SQL SELECT id FROM tb WHERE id IN(:ids) SQL; $db = GeneralService::getSlaveDB(); $result = $db->createCommand($sql)->query([':ids' => '1013,1015,1017'

  • 通过event对象的fromElement属性解决热区设置主实体的一个bug

    点击"设为主实体"这个超链接后,原来的提示框会变色,而且会显示内容:"已经设置为合并主实体". 问题:当a热区的提示框上的超链接下面有另一个热区b的时候,点击a热区提示框的超链接后,会触发b热区的mouseover事件,导致a热区的提示框会消失. 这个问题我苦思了好久也找不到解决方法,上星期周俊提示我可以检测一下事件的来源元素.我突然想到IE的event对象有一个属性 fromElement,测试了一下,果然在点击a热区提示框的超链接后,b热区的mouseover事

  • 25个实用酷炫的Android开源UI框架

    25个实用酷炫的Android开源UI框架

    最近找了一些合适开源控件,这样在日常工作中会更加省时,再此分享给大家,希望能对大家有帮助,此博文介绍的都是UI上面的框架,接下来会有其他的开源框架(如:HTTP框架.DB框架). 1.Side-Menu.Android 分类侧滑菜单,Yalantis 出品. 项目地址:https://github.com/Yalantis/Side-Menu.Android 2.Context-Menu.Android 可以方便快速集成漂亮带有动画效果的上下文菜单,Yalantis出品. 项目地址:https:

  • Thinkphp中volist标签mod控制一定记录的换行BUG解决方法

    本文实例讲述了Thinkphp中volist标签mod控制一定记录的换行BUG解决方法.分享给大家供大家参考.具体方法如下: 一.BUG描述: 存在于thinkphp 2.0 版本 Mod属性还用于控制一定记录的换行,例如: 复制代码 代码如下: <volist name="list" id="vo" mod="5" > {$vo.name} <eq name="mod" value="4"

随机推荐