您的位置:首页 > 健康 > 养生 > js wheel滚轮事件实现懒加载

js wheel滚轮事件实现懒加载

2024/10/7 0:15:57 来源:https://blog.csdn.net/qq_53986004/article/details/140142738  浏览:    关键词:js wheel滚轮事件实现懒加载

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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com