Scroll to bottom to load case

<div class="secure_inspect_list" ref="secureListBox" id="secure_list_box" @scroll="handleScroll">
    <template v-for="(it, i) in secure_inspect_list" >
		<a-card style="margin-bottom: 10px;">
			<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
				<div>{
   
   { it.createTime }}</div>
				<div :style=" it.status == 1 ? 'color: #00ff00' : 'color: #ff4040'">{
   
   { it.status == 0 ? '检查中' : '已完成' }}</div>
			</div>
			<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
			    <div>单号：{
   
   { it.num }}</div>
			    <div>船名：{
   
   { it.shipName }}</div>
			</div>
			<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
				div>检查地：{
   
   { it.checkPort }}</div>
				<div>检查人：{
   
   { it.createBy }}</div>
			</div>
			<div v-if="it.safeNum || it.dangerNum || it.uncheckNum" style="display: flex; justify-content: space-between; margin-bottom: 10px;">
				<div>安全项：{
   
   { it.safeNum }}</div>
				<div>隐患项：{
   
   { it.dangerNum }}</div>
				<div>未检查：{
   
   { it.uncheckNum }}</div>
			</div>
		</a-card>
	</template>
</div>

handleScroll(e) {
	const {scrollTop, clientHeight, scrollHeight} = e.target
	if (scrollTop + clientHeight >= scrollHeight-80 && this.flag){
		this.flag = false
		setTimeout(() => {
			this.flag = true
			if(this.total > this.pageNo * this.pageSize) {
				this.pageNo += 1
				this.getSecureList()
			}
		}, 500)
	}
},