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>