<template>
<div>
<div class="test" @scroll="scrollEvent">
<ul v-for="(item, index) in list " :key="index">
<li>
<div class="fx-sb item ">
<p class="text-hide-1 fx-1">{{ item.content }}</p>
<p class="date">
{{ item.incidentDate + ' ' + item.incidentTime }}
</p>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import { company } from '@/api/shouye'
export default {
data() {
return {
list: [],
page: 1,
size: 10,
total:0
}
},
watch: {
},
mounted() {
company({ page: this.page, size: this.size }).then(res => {
console.log(res)
this.list = res.data.data
this.total=res.data.total
})
},
methods: {
//滚动条触发事件
scrollEvent(e) {
//console.log(e)
if(this.total===this.list.length&&this.total>0){
return
}
else if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight) {
console.log("嘿嘿我在底部触发了")
this.page=this.page+1;
console.log(this.page,"页码")
company({ page: this.page, size: this.size }).then(res => {
console.log(res.data)
this.list.push( ...res.data.data);
console.log(this.list.length)
this.total=res.data.total
})
}
},
}
}
</script>
<style scoped lang="scss">
.item {
padding: 20px 0;
border-bottom: 1px dashed #cbcbcb;
.date {
width: 180px;
text-align: end;
}
}
.test {
max-height: 400px;
overflow: auto;
}
</style>
触底代码
//滚动条触发事件
scrollEvent(e) {
console.log(e)
if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight ) {
console.log("嘿嘿我在底部触发了")
}
},