ScrollEvent(){
let el = document.querySelector('.app-content')
let flag = true
if(flag){
if(el.scrollTop + el.clientHeight >= el.scrollHeight - this.page * 5){
flag = false
console.log('获取数据');
axios.get(`http://localhost:3100/shopCartGetPage?page=${this.page}`).then((res)=>{
console.log(res.data.msg,'msg');
if(res.data.msg === '请求成功'){
this.page++;
this.arr3.push(...res.data.data)
console.log('数据加载完毕');
}else{
console.log('数据没了');
return
}
})
}else{
console.log('继续滚动还没到底');
console.log('当前高度:'+(el.scrollTop+el.clientHeight));
console.log('总高度'+el.scrollHeight);
}
}else{
console.log('等待数据加载');
return
}
},
<div @scroll="ScrollEvent()" class="app-content">
<div @click="tiao(item)" v-for="(item,index) in arr3" :key="index" class="content-Item">
<div class="Item-img">
<img :src="item.img"/>
</div>
<div class="Item-content">
<div>{{ item.name.slice(0,12) }}</div>
<div>¥{{ item.price }}</div>
<div>
<span>{{ item.brand }}</span>
<span>进店</span>
</div>
</div>
</div>
</div>