28 lines
679 B
Vue
28 lines
679 B
Vue
|
<template>
|
||
|
|
<div class='scroll_load' @scroll='handler'>
|
||
|
|
<c-loading-icon v-if='position === "top" && loading'>LOAD TOP</c-loading-icon>
|
||
|
|
<slot></slot>
|
||
|
|
<c-loading-icon v-if='position === "bottom" && loading'>LOAD BOTTOM</c-loading-icon>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'c-scroll-load',
|
||
|
|
props: ['position', 'loading'],
|
||
|
|
methods: {
|
||
|
|
handler (e) {
|
||
|
|
let $el = e.target;
|
||
|
|
let height = $el.scrollHeight - $el.scrollTop - 16 <= $el.clientHeight;
|
||
|
|
|
||
|
|
if(
|
||
|
|
(this.position === 'top' && $el.scrollTop < 16) ||
|
||
|
|
(this.position === 'bottom' && height)
|
||
|
|
) {
|
||
|
|
this.$emit('load');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|