2024.7.2今天我学习了如何使用js wheel滚轮事件实现懒加载的效果,
代码如下:
<template>
<div @wheel="scroll" ref="scroll"></div>
<el-alert v-if="is_flag" title="正在努力加载中..." type="success" center :closable="false" show-icon/>
<el-alert v-if="is_more" title="没有更多啦!" type="warning" center show-icon/>
</template>
<script>
export default{
data(){
return{
is_flag: false,//是否正在加载中
is_more: false,//是否没有更多
}
},
methods:{
//滚轮实现懒加载方法
scroll(event){
const target = this.$refs.scroll;
const scrollTop = target.scrollTop; // 滚动条顶部到滚动内容顶部的距离
const clientHeight = target.clientHeight; // 可视区域的高度
const scrollHeight = target.scrollHeight; // 滚动内容的总高度
let is_scroll_height_top = scrollTop + clientHeight + 50 >= scrollHeight;//是否滚动高度到底部(我这边额外增加50px的高度,不然会一直false)
if(is_scroll_height_top){
this.is_flag = true;
xxxxx这里面处理懒加载的方法
}else{
this.is_flag = false;
this.is_more = true;
setTimeout(()=>{
this.is_more = false;
},2000)
}
}
}
}
</script>