// 加载区域
<div class="pullup-tips">
<div v-if="!isPullUpLoad" class="before-trigger">
<span class="pullup-txt">{{isComplete ? '我也是有底线的~' : '上拉加载更多...'}}</span>
</div>
<div v-else class="after-trigger">
<span class="pullup-txt">加载中...</span>
</div>
</div>
// 容器可视高度
computed: {
containerHeight () {
let h = this.$refs.order.clientHeight
return h
}
},
methods: {
// 滚动监听
handleOnScroll () {
let containerHeight = this.containerHeight
let scrollHeight = this.scrollHeight()
let scroll = this.scrollT()
console.log(scrollHeight)
// 滚动到底部的加载栏时,如果还有商品未加载
if (scrollHeight - containerHeight - scroll < 30 && this.isNext && this.controler) {
// 节流阀
this.controler = false
// 显示加载中
this.isPullUpLoad = true
Order({
page: ++this.page,
status: this.status
}).then((result) => {
let res = result.data
// 是否支持下次加载
this.isNext = res.next
if (res.code === 1) {
res.data.forEach((item) => {
this.list.push(item)
})
this.controler = true
this.isPullUpLoad = false
}
})
} else {
this.isComplete = true
}
},
// 滚动距离
scrollT () {
let h = this.$refs.order.scrollTop
return h
},
// 文档完整高度
scrollHeight () {
let h = this.$refs.content.scrollHeight
return h
}
}
我自己的vue中实现滚动加载
最新推荐文章于 2024-06-20 15:56:14 发布