注意：this.$publicFunction.debounce(this.sayDebounce, 800) （如果没有封装防抖函数---了解防抖点击）可以直接改为 this.sayDebounce()
1.scroll实现
你要先了解clientHeight、scrollTop
<style>
.testList {
height: 100px;
margin: 10px 0;
background-color: red;
}
#test1 {
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: auto;
}
</style>
<template>
<div>
<div id="test1" ref="testRef" @scroll="handleScroll">
<div ref="testListRef" class="testList" v-for="(item) in testArr" :key="item">
内容................{{item}}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
testArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
clientHeight: 0,
listHeight: 0
}
},
// 页面初始化 created activated
created() {
},
// 计算属性顾名思义就是通过其他变量计算得来的另一个属性
computed: {
},
// 侦听一个特定的值，当该值变化时执行特定的函数
watch: {
},
// 页面加载完
mounted() {
},
// 页面离开 destroyed deactivated
destroyed() {
},
methods: {
handleScroll(e) {
console.log('-----handleScroll----')
this.$publicFunction.debounce(this.sayDebounce, 800)
},
sayDebounce() {
this.clientHeight = this.$refs.testRef.clientHeight
this.listHeight = (this.$refs.testListRef[0].clientHeight)*this.$refs.testListRef.length
console.log('手机屏幕高度：' + this.clientHeight)
console.log('滚动高度：' + this.$refs.testRef.scrollTop)
console.log('当前滚动+屏幕高度：' + parseInt(this.clientHeight + this.$refs.testRef.scrollTop))
console.log('列表高度：' + this.listHeight)
if (this.clientHeight + this.$refs.testRef.scrollTop >= this.listHeight) {
console.log('到底了----显示加载')
if (this.testArr.length > 50) {
console.log('-----没有更多数据了-----')
return
}
let arr = []
for(let i=this.testArr.length+1; i<this.testArr.length+10; i++) {
arr.push(i)
}
console.log(arr)
let test = this.testArr.concat(arr)
this.testArr = test
console.log(this.testArr)
}
}
}
}
</script>
2.IntersectionObserver实现
文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserverEntry
<style>
.view-list{
width: 100%;
height: 100vh;
overflow-x: scroll;
background-color: rgba(0, 0, 255, 0.25);
}
.item{
height: 50px;
border:1px gray solid;
margin-bottom: 10px;
}
</style>
<template>
<div>
<div class="view-list">
<div class="item" v-for="(item,index) in testArr" :key="index">
内容................{{item}}
</div>
<div ref="loading">加载中</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
testArr:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
io: null
}
},
// 页面初始化 created activated
created() {
},
// 计算属性顾名思义就是通过其他变量计算得来的另一个属性
computed: {
},
// 侦听一个特定的值，当该值变化时执行特定的函数
watch: {
},
// 页面加载完
mounted() {
// 初始化观察对象
this.io = new IntersectionObserver( this.handleScroll, {});
// 获取被监听元素
let viewList = this.$refs.loading;
// 绑定
this.io.observe(viewList);
},
// 页面离开 destroyed deactivated
destroyed() {
console.log("---关闭观察器---")
// 关闭观察器
this.io.disconnect()
},
methods: {
handleScroll(status) {
console.log('-----handleScroll----')
this.$publicFunction.debounce(this.sayDebounce, 800, status)
},
// 触发监听回调
sayDebounce(status){
console.log('防抖成功')
status = status[0];
let isShow = status.isIntersecting;
if(isShow){
console.log("加载中 ---- ");
let arr = []
for(let i=this.testArr.length+1; i<this.testArr.length+10; i++) {
arr.push(i)
}
console.log(arr)
let test = this.testArr.concat(arr)
this.testArr = test
console.log(this.testArr)
}
},
}
}
</script>
