vue滚动加载更多组件,适用于pc端和移动端,功能单一简单,只处理了滚动加载问题,其余loading等效果可自己在slot里面灵活配置
<template>
<div class="scroll-more">
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
//获取滚动条当前的位置
getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
},
//获取当前可视范围的高度
getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(
document.body.clientHeight,
document.documentElement.clientHeight
);
} else {
clientHeight = Math.max(
document.body.clientHeight,
document.documentElement.clientHeight
);
}
return clientHeight;
},
//获取文档完整的高度
getScrollHeight() {
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight
);
}
},
created() {},
mounted() {
//滚动事件触发
var self = this;
window.onscroll = function() {
if (self.getScrollTop() + self.getClientHeight() >= (self.getScrollHeight())) {
console.log("到底部了")
self.$emit('scroll-state',true)
}
};
},
destroyed() {
// window.onscroll = null;
}
};
</script>
<style>
</style>
使用
<scroll-more @scroll-state="scroll">
# 这里写内容和loading效果
</scroll-more>
...
methods:{
scroll(){
console.log('触发了')
}
}
网友评论