使用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 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
JavaScript async/await原理及实例解析
Dec 02 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
基于python log取对数详解
2018/06/08 Python
python构建基础的爬虫教学
2018/12/23 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
酒店副总岗位职责
2013/12/24 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
党员教师一句话承诺
2014/05/30 职场文书
龙门石窟导游词
2015/02/02 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书