监听滚动条实现数据懒加载

思路：当滚动条滚动到底部时，加载新数据
注意：需要根据距离底部的位置加载数据，考虑到新数据进来会使滚动条距离底部的位置有所改变，避免重复加载数据

代码

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

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 框架的