js wheel滚轮事件实现懒加载

敲代码无敌小奶龙

于 2024-07-03 09:25:17 发布

阅读量293

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_53986004/article/details/140142738

版权

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>