上拉加载vue封装代码如下:
<script>
export default {
name: 'DownList',
data () {
return {
isHeight: 0
}
},
mounted () {
window.addEventListener('scroll', this.onScroll)
},
methods: {
onScroll () {
const innerHeight = this.$refs.myScroll.clientHeight || 0
const outerHeight = document.documentElement.clientHeight || document.body.clientWidth || 0
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
if (innerHeight < this.isHeight) {
this.isHeight = 0
}
if (innerHeight <= outerHeight + scrollTop && this.isHeight < innerHeight) {
this.isHeight = innerHeight
this.$emit('change')
}
}
},
render () {
return (
<div ref="myScroll" class='scroll'>
{this.$slots.default && this.$slots.default.map(item => {
return item.componentOptions ? (<item></item>) : (item)
})}
</div>
)
}
}
</script>
<style >
.scroll {
overflow: hidden;
}
</style>