时间:2021-05-25
一、问题描述
在使用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样式的设置:
到此这篇关于使用Element的InfiniteScroll 无限滚动组件报错的解决的文章就介绍到这了,更多相关Element InfiniteScroll无限滚动报错内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了从新建vue项目到引入组件Element以及Errorwhenrenderingcomponent报错解决,分享给大家一、新建项目1.打开cmd,运行
由于工作的原因,现在需要实现一个滚动加载(PC端)的效果,之前使用的是vue+element,但是element没有类似的组件,所以去github上找了一个名叫
jquerymasonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用
大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项。针对前面element按需引入的一些配置这里
Nuxt使用create-nuxt-app创建项目时,选择使用Element-UI为默认组件库,发现Nuxt没有开启Element-UI的按需引入配置,需要自行