<!--
|
* @Author: 小明丶
|
* @Date: 2020-01-07 09:27:05
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-10-24 14:41:23
|
* @Description: 下滑分页组件 为保证不重复请求 使用时要根据显示内容的div高度确定一次返回条数，数据足够的情况下一次放回请装满容器
|
-->
|
<template>
|
<div class="h-list" :style="{'height':height,'background':background}">
|
<div class="box" ref="lisBox">
|
<slot></slot>
|
<p v-if="loading" class="load">加载中....</p>
|
<p v-if="finished" class="finish">没有更多了</p>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
name:'h-list',
|
/**
|
* defScroll-滚动条距离底部小于此距离执行加载，可根据需求调整距离（必传）
|
* finished-是否已经等到所有数据（必传）
|
* loading-是否显示加载（必传）
|
*/
|
props:['defScroll','finished','loading','height','background'],
|
data() {
|
return {
|
previous:0,
|
now:0,
|
}
|
},
|
mounted(){
|
document.querySelector('.h-list').addEventListener('scroll', this.boxScroll,true)
|
//window.addEventListener('scroll', this.boxScroll,true)
|
console.log(this.defScroll)
|
},
|
methods:{
|
boxScroll(e){
|
this.now = new Date().getTime()
|
// 获取滚动条距离容器底部的距离
|
let scrollBottom =
|
e.target.scrollHeight -
|
e.target.scrollTop -
|
e.target.clientHeight;
|
if(this.now-this.previous > 100){
|
if(scrollBottom < this.defScroll && !this.finished && scrollBottom!=0){
|
this.loading = true
|
this.$emit('scroll')
|
this.previous = this.now
|
return
|
}else{
|
this.loading = false
|
return
|
}
|
}
|
},
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.h-list::-webkit-scrollbar,.withdrawals-box::-webkit-scrollbar {
|
display: none;
|
}
|
.h-list{
|
overflow: scroll;
|
height: 75vh;
|
background-color: #fff;
|
width: 100%;
|
padding-bottom: 20px;
|
display: flex;
|
justify-content: center;
|
.load,.finish{
|
text-align: center;
|
}
|
}
|
</style>
|
