一、問題描述
在使用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>