滚动到底部加载案例

最新推荐文章于 2024-07-20 18:16:53 发布

郑建零零发

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量350

点赞数

分类专栏： vue 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_52421092/article/details/131655248

版权

vue 专栏收录该内容

75 篇文章 2 订阅

订阅专栏

<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)
	}
},