Vue 上拉加载简单实现
作者:互联网
<template>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</template>
<script>
// 防抖
const debounce = (fn, delay) => {
let timer = null
return function (...args) {
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
export default {
name: 'Test',
data() {
return {
items: 20,
handleScroll: debounce(this.onScroll, 100)
};
},
methods: {
onScroll() {
// 可滚动容器的高度
const innerHeight = this.$el.clientHeight
// 可滚动容器超出当前窗口显示范围的高度
const {clientHeight, scrollTop} = document.documentElement
if (innerHeight <= clientHeight + scrollTop) {
// do sth
this.items += 10
}
},
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('scroll', this.handleScroll)
})
}
};
</script>
<style lang="scss" scope>
li {
line-height: 48px;
font-size: 24px;
font-weight: bold;
}
</style>
标签:delay,Vue,const,timer,onScroll,innerHeight,上拉,font,加载 来源: https://www.cnblogs.com/coderDemo/p/14188217.html