<template>
<div id="wrap">
<slot></slot>
<div class="scroll-txt" v-if="!scollEnd">加载中</div>
<div class="scroll-txt" v-if="scollEnd">没有更多数据啦!</div>
</div>
</template>
<script>
import { Divider } from "vux";
export default {
name: "Scoller",
components: {
Divider
},
props: {
isLoading: {
type: Boolean,
default: false
},
scollEnd: {
type: Boolean,
default: false
}
},
data() {
return {
time: "",
firstTime: true
};
},
mounted() {
const time = new Date().getTime();
this.time = time;
window.addEventListener("scroll", this.scrollFn);
},
beforeDestroy() {
window.removeEventListener("scroll", this.scrollFn);
},
methods: {
scrollFn() {
if (
document.querySelector("#wrap").offsetHeight -
window.pageYOffset -
window.screen.height <
100
) {
let curTime = Date.parse(new Date());
if (curTime - this.time >= 1000 || this.firstTime) {
// 时间差>=1秒直接执行
this.firstTime = false;
!this.isLoading && this.handle();
this.time = curTime;
}
}
},
handle() {
this.$emit("onload");
}
}
};
</script>
<style lang="less" scoped>
.scroll-txt {
text-align: center;
padding: 10px;
color: #999999;
}
</style>