思路：

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

注意：

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

代码

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

链接: https://fly63.com/article/detial/5996