最近我試了下vue版的element-ui 2.15.3版，發現無限滾動元件有問題，不知道是我弄錯了什麼地方還是怎麼了，後來查了下資料，重新修改了下就能用了，修改如下
<template>
<div>
<ul @scroll="myFc">
<li v-for="i in data" :key="i">{{ i }}</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return {
data:20,
load:true
}
},
methods:{
myFc(el){
// .scrollHeight); 傳回整個元素的高度
// .scrollTop); //傳回目前視圖中的實際元素的頂部邊緣和頂部邊緣之間的距離
// .clientHeight); //傳回元素在頁面上傳回内容的可視高度
if(el.target.scrollHeight-el.target.scrollTop-el.target.clientHeight<5 && this.load){
this.load=false
setTimeout(()=>{
this.data+=2
this.load=true
},1000)
console.log(this.data);
}
}
}
}
</script>
<style lang="scss" scoped>
ul{
overflow: auto;
height: 200px;
}
</style>
純js環境下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
height: 300px;
width: 200px;
/* border: 1px solid black; */
overflow: auto;
}
.content{
height: 400px;
width: 150px;
/* border: 1px solid red; */
}
</style>
</head>
<body>
<div onscroll="myFunction()" class="box" id="box">
<div class="content">内容</div>
</div>
<script>
let count=0
let load=true
function myFunction(){
let ul=document.querySelector(".box")
if(ul.scrollHeight-ul.scrollTop-ul.clientHeight<5 && load){
load=false
setTimeout(()=>{
count++
let newel=document.createElement("p")
newel.innerHTML=`這是新添加的第${count}個P元素`
ul.appendChild(newel)
load=true
},1000)
}
}
</script>
</body>
</html>
之是以要加一個load變量，是因為元素滾動事件會一直觸發，是以要适當的控制下
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)