使用Element的InfiniteScroll 无限滚动组件报错的解决
一、问题描述
在使用Element
的InfiniteScroll
无限滚动时候出现以下错误:
TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'
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"
,这里的disabled
是computed
里面的属性,利用其控制是否继续加载。当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-ui el-table合计行 show-summary 不显示的问题
有时候需要在table的底部有合计,这时候官方给的是在table里设置,show-summary就可以了但是给table加了一个固定高度的话,就不显示了,打开控制台可以看到这个合计是存在的那么需...2020-12-11vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12使用mybatis-plus报错Invalid bound statement (not found)错误
这篇文章主要介绍了使用mybatis-plus报错Invalid bound statement (not found)错误,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-02- 这篇文章主要介绍了Element PageHeader页头的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
- 本文主要介绍了vue+element实现动态换肤的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-07
- 这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 本文主要介绍了element表格行列拖拽的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-02
- 这篇文章主要介绍了Element-ui upload上传文件限制的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-25
- 这篇文章主要介绍了Element Card 卡片的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-26
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
这篇文章主要介绍了Element-ui 自带的两种远程搜索(模糊查询)用法讲解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-29- 这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-10
- 本文主要介绍了Element的穿梭框数据量大时点击全选卡顿的解决方案,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-31
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19
vue element table中自定义一些input的验证操作
这篇文章主要介绍了vue element table中自定义一些input的验证操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18mysql报错:MySQL server version for the right syntax to use near type=InnoDB的解决方法
这篇文章主要介绍了mysql报错:MySQL server version for the right syntax to use near type=InnoDB的解决方法,涉及MySQL语句的使用技巧,需要的朋友可以参考下...2016-01-15- 本文给大家分享Jenkins集成SonarQube遇到的报错问题及解决方法,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-07-15