vue判断滚动条是否触底(触底增加数据)
html部分<div id="scro" style="height:300px;overflow: auto;" ><a-tablestyle="margin-top:20px;background:#fff" :columns="columns":dataSource="dataSource" :customRow="customRow" :pagination="false
·
html部分
<div id="scro" style="height:300px;overflow: auto;" >
<a-table
style="margin-top:20px;background:#fff" :columns="columns"
:dataSource="dataSource" :customRow="customRow" :pagination="false">
</a-table>
</div>
js部分
beforeDestroy () {
// 要进行函数卸载
this.scroEl.removeEventListener('scroll', this.handleScroll)
},
mounted () {
// this.dragJs()
this.listenerFunction()
var scroEl = document.getElementById('scro')
this.scroEl = scroEl
},
methods: {
// 监听滚动事件 scroEl是table外的div的dom
listenerFunction (e) {
var scroEl = document.getElementById('scro')
scroEl.addEventListener('scroll', this.handleScroll, true)
},
handleScroll () {
// scroel
var scroEl = document.getElementById('scro')
// 获取内容高度
const scrollHeight = scroEl.scrollHeight
// 获取滚动条纵坐标位置
const scrollTop = scroEl.scrollTop
// 我给的div高度是300px
// 判断是否到底部是的话把数据push进去
if (scrollHeight === scrollTop + 300) {
this.dataSource.push({
name: '测试',
age: 16,
address: '测试',
key: 13
})
}
},
}
判断滚动条是否触底逻辑就是 scrollHeight===scrollTop+div的高度(或者window.clientheight)
更多推荐
已为社区贡献5条内容
所有评论(0)