1. 首页
  2. SEO百科
  3. Web前端

监听滚动条,实现数据懒加载入门知识_懒加载零基础入门

思路:当滚动条滚动到底部时,加载新数据注意:需要根据距离底部的位置加载数据,考虑到新数据进来会使滚动条距离底部的位置有所改变,避免重复加载数据代码template//@scroll监听滚动条
<div class="sendDialog" style="max-height:200px;overflow-y:auto;" @scroll="getNewDat

监听滚动条,实现数据懒加载入门知识

思路:

当滚动条滚动到底部时,加载新数据

监听滚动条,实现数据懒加载入门知识_懒加载零基础入门

注意:

需要根据距离底部的位置加载数据,考虑到新数据进来会使滚动条距离底部的位置有所改变,避免重复加载数据

代码

template

//@scroll监听滚动条
<div class="sendDialog" style="max-height:200px;overflow-y:auto;" @scroll="getNewData">
      <el-radio-group v-model="workerRadio">
        <el-radio v-for="(item, index) in workergroup" :key="index" :label="item.id">
          <span class="workerInfo">{{item.name}}</span>
          <span>{{item.mobile}}</span>
        </el-radio>
      </el-radio-group>
    </div>

method

<span type="button" data-toggle="tooltip" data-placement="top" data-clipboard-text="getNewData (el) {
let height = el.target.scrollHeight – el.target.scrollTop – el.target.clientHeight //滚动条距离底部的距离 scrollHeight是整个可滚动的高度,scrollTop是滚动条距离顶部的高度,clientHeight是div的可视高度
// console.log('height', height)
if(height this.page){ //在加载完最后一页的数据时停止加载
this.sendWorker() //调数据的方法,在此省略
}
}
}” title=”” data-original-title=”复制”>

getNewData (el) {
      let height = el.target.scrollHeight - el.target.scrollTop - el.target.clientHeight   //滚动条距离底部的距离  scrollHeight是整个可滚动的高度,scrollTop是滚动条距离顶部的高度,clientHeight是div的可视高度
      // console.log('height', height)
      if(height < 10){       //当滚动条距离底部距离小于10时判断要不要加载新数据
        this.page++
        if(this.totalPage > this.page){  //在加载完最后一页的数据时停止加载
          this.sendWorker()     //调数据的方法,在此省略
        }
      }
    }

以上代码是基于vue框架的

海计划公众号