关于vue滚动到底部刷新数据
滚动到底部刷新数据
·
mounted() {
this.getTreeLists(this.type, this.id, 'echart');
this.dom = document.querySelector('.el-table__body-wrapper')
this.dom.addEventListener('scroll', () => {
// 滚动距离
console.log(12312)
const scrollTop = this.dom.scrollTop
// 变量windowHeight是可视区的高度
const windowHeight = this.dom.clientHeight || this.dom.clientHeight
// 变量scrollHeight是滚动条的总高度
const scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight
console.log(scrollTop + windowHeight + 20)
console.log(scrollHeight)
if (scrollTop + windowHeight + 20 > scrollHeight && this.loadingMore) {
// 获取到的不是全部数据 当滚动到底部 继续获取新的数据
this.getDataMy()
//防止重复请求数据
this.loadingMore = false
console.log('scrollTop', scrollTop + 'windowHeight', windowHeight + 'scrollHeight', scrollHeight)
}
})
},
getData() {
if (this.current * 10 > this.totalCount) {
return
}
this.pageSize = 10
this.current++
this.getList()
},
getList() {
const params = {
size: this.pageSize,
current: this.current,
tenantName: this.tenantName
};
this.$post(api.getPermissionTypeVOs, params).then(res => {
this.loadingMore = true
if(res.code === 0) {
this.nameList = this.nameList.concat(res.data.records)
this.totalCount = res.data.totalCount
}
})
},
注意点:this.nameList = this.nameList.concat(res.data.records) 否则数据太小撑不起来
更多推荐
已为社区贡献3条内容
所有评论(0)