使用Element的InfiniteScroll 无限滚动组件报错的解决


Posted in Javascript onJuly 27, 2020

一、问题描述

在使用ElementInfiniteScroll 无限滚动时候出现以下错误:

TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'

使用Element的InfiniteScroll 无限滚动组件报错的解决

InfiniteScroll的更多用法element官网

二、解决办法

给需要使用 InfiniteScroll 的元素或者它的父级元素加上 overflow:auto; 属性即可。

<template>
 <div class="home">
    <div v-infinite-scroll="loadMore" v-for="i in count" class="infinite-list" :key="i">{{ i+1 }}</div>
 </div>
</template>
<script>
export default {
 data() {
  return {
   count:5
  }
 },
 methods: {
  loadMore() {
   // this.count+=1;
   console.log('加载...')  
  }
 }
};
</script>
<style lang="scss">
.home {
 .infinite-list{
  width: 500px;
  height: 40px;
  line-height: 40px;
  background: lightblue;
  margin:10px;
  overflow:auto; // 加上该属性即可。由浏览器定夺,如果内容被修剪,浏览器就会显示滚动条以便查看其余内容
 }
}
</style>

三、注意事项

InfiniteScroll 无限滚动组件, 滚动至底部时,加载更多数据。据官网描述其基础用法:

给实现滚动加载的元素(会出现滚动条的元素)添加 v-infinite-scroll属性,属性值是相应的加载方法名,如loadMore,即可实现滚动到底部时触发该loadMore 方法

注意属性和css样式的设置:

  • 给设置了 v-infinite-scroll的元素或者其父元素设置高度如 height:200px;,并让其超出高度显示滚动条 overflow:auto;
  • infinite-scroll-disabled="disabled",这里的 disabledcomputed 里面的属性,利用其控制是否继续加载。当disabled为true的时候,该加载函数 loadMore 函数将不再被触发。
  • infinite-scroll-immediate 默认为 true,即 立即执行加载方法 loadMore,以防初始状态下内容无法撑满容器。即loadMore会先执行一次,这里设置false,是让其初始不执行,等滚动到底部时,再执行该 loadMore 方法。
<template>
	<div class="infinite-list-wrapper">
     <ul class="list" v-infinite-scroll="loadMore" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
      <li v-for="i in count" class="list-item" :key="i">{{ i }}</li>
     </ul>
     <p v-if="loading">加载中...</p>
     <p v-if="noMore">没有更多了</p>
    </div>
</template>
<script>
export default {
 data() {
  return {
   count:5,
   loading: false
  };
 },
 computed: {
  noMore() {
   return this.count >= 20;
  },
  disabled() {
   return this.loading || this.noMore;
  }
 },
 methods: {
  loadMore() {
   console.log("加载...")
   this.loading = true;
   setTimeout(() => {
    this.count += 2;
    this.loading = false;
   }, 2000);
  }
 }
};
</script>
<style lang="scss">
.home {
 .infinite-list-wrapper{
	  height:200px; // 1. 指定高度
	  overflow: auto; // 2. 内容超过指定高度 出现滚动条
	  width: 500px;
	  border:1px solid green;
	  margin-top:120px;
	  .list-item{
		   background: lightblue;
		   margin:10px;
		   height:30px;
		   line-height: 30px;
	  }
 }
}
</style>

使用Element的InfiniteScroll 无限滚动组件报错的解决

使用Element的InfiniteScroll 无限滚动组件报错的解决

使用Element的InfiniteScroll 无限滚动组件报错的解决

到此这篇关于使用Element的InfiniteScroll 无限滚动组件报错的解决的文章就介绍到这了,更多相关Element InfiniteScroll无限滚动报错内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 #Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 #Javascript
Element Alert警告的具体使用方法
Jul 27 #Javascript
Element Badge标记的使用方法
Jul 27 #Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 #Javascript
JS倒计时两种实现方式代码实例
Jul 27 #Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 #Javascript
You might like
如何写php程序?
2006/12/08 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
jQuery选择器全集详解
2014/11/24 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
寻找网站后台地址的python脚本
2014/09/01 Python
Python检测QQ在线状态的方法
2015/05/09 Python
Python实现配置文件备份的方法
2015/07/30 Python
详解Python中的四种队列
2018/05/21 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python线程中的同步问题及解决方法
2019/08/29 Python
python中round函数保留两位小数的方法
2020/12/04 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
大学自我鉴定范文
2013/12/26 职场文书
拓展训练激励口号
2014/06/17 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
2015年重阳节主持词
2015/07/04 职场文书
中学生运动会广播稿
2015/08/19 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript