第一步: 大体框架类似(里面也可以加加载状态,因为我们有lodding的判断)
<div class="helloword">
<ul>
<li v-for="item in list" :key="item.id" v-text="item.name ? item.name : '-- --'"></li>
</ul>
</div>
第二步: 在data中定义loding: false和list:[]
data () {
return {
lodding: false,
page: 1, // 分页(size: 10直接写在请求里面)
searchs: '',
list: []
}
}
第三步:初始化实例时挂载请求
mounted () {
this.getlist(this.searchs, this.page, '', '', '')
window.addEventListener('scroll', this.scrllos)
}
第四步:scroll监听事件和getlist请求事件
methods: {
getlist (q, page, zczb, clsj, hymc) {
compansearch(q, page, zczb, clsj, hymc).then(res => {
this.list = dates.content
this.total = dates.total
})
},
scrllos () {
// 当前可视高度
const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
// 获取内容向上滚动了多少距离
const domScrollTop = document.body.clientHeight || document.querySelector('.helloword').clientHeight
// 当内容滚动到距离底部<50时,且没有加载完成
// 内容距离底部多少距离 = 内容总高度-滚动高度-当前可视高度
if (this.$el.scrollHeight - domScrollTop - scrollTop < 50 && !this.liststatus) {
// 设置为正在加载中
this.liststatus = true
setTimeout(() => {
if (this.list.length < this.total) {
this.page++
compansearch(this.searchs, this.page).then(res => {
this.list = [...this.list, ...res.data.content]
this.total = res.data.total
this.liststatus = false
})
}
}, 300)
}
}
}
最后一步:清除scroll监听事件,必须的,不然去奇特页面还会有请求存在,vue是单页面应用嘿嘿嘿
destroyed () {
window.removeEventListener('scroll', this.scrllos)
}
随笔 留记......
网友评论