<template>

<div class="data-scroll">

<div class="options2">

<div class="title" v-if="showTitle">回访记录:</div>

<div class="scroll-content" ref="content">

<div class="items" ref="box" @scroll="orderScroll">

<div :class="[showBorder ?'border-line':'']">

<span class="item" v-for="(data,index) in dataList" :key="index">

<slot :row="data"></slot>

</span>

</div>

</div>

</div>

</div>

</div>

</template>

<script>

export default {

name: "data-scroll",

data() {

return {

eventAction: true,

distance: 40,

height: 0

};

},

props: {

dataList: {

type: Array,

default: () => {

return [];

}

},

showBorder: {

type: Boolean,

default: false

},

containerHeight: {

type: Number,

default: 100

},

showTitle: {

type: Boolean,

default: true

}

},

watch: {

containerHeight: {

handler(val) {

this.height = val;

},

immediate: true

}

},

methods: {

orderScroll(e) {

// console.log(

// this.$refs.box.offsetHeight,

// this.$refs.box.scrollTop,

// this.$refs.box.offsetTop

// );

let scrollHeight = e.target.scrollHeight - e.target.offsetHeight;

let residualHeight = scrollHeight - this.$refs.box.scrollTop;

 

//console.log(residualHeight);

if (residualHeight < this.distance && this.eventAction) {

this.getRecordList();

this.eventAction = false;

} else if (residualHeight > this.distance) {

this.eventAction = true;

}

},

getRecordList() {

console.log("滚动列表获取数据");

this.$emit("getScrollData");

}

},

mounted() {

this.$nextTick(() => {

//this.$refs.content.style.height = this.containerHeight;

document.addEventListener("scroll", this.Scroll);

this.$refs.content.style.height = this.height + "px";

});

}

};

</script>

<style lang="scss">

.data-scroll {

width: 100%;

 

.items {

width: 100%;

height: 100%;

overflow-y: auto;

overflow-x: hidden;

.border-line {

width: 99%;

border: 1px solid #e5e5e5;

border-left: 1px solid #e5e5e5;

border-top: none;

}

}

::-webkit-scrollbar-track-piece {

//滚动条凹槽的颜色，还可以设置边框属性

background-color: #e5e5e5;

border-radius: 9px;

}

::-webkit-scrollbar {

//滚动条的宽度

width: 9px;

height: 9px;

border-radius: 9px;

}

::-webkit-scrollbar-thumb {

//滚动条的设置

background-color: #045735;

background-clip: padding-box;

min-height: 28px;

border-radius: 9px;

}

::-webkit-scrollbar-thumb:hover {

background-color: #045735;

}

}

</style>