思路:当滚动条滚动到底部时,加载新数据
注意:需要根据距离底部的位置加载数据,考虑到新数据进来会使滚动条距离底部的位置有所改变,避免重复加载数据
代码
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框架的
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。