实现表格滚动

实现表格滚动

346

<template>
	<div class="table">
		<div class="th">
			<span class="col1">序号</span>
			<span class="col2">问题</span>
			<span class="col3">占比</span>
			<span class="col4">总面积</span>
		</div>
		<div
			class="roll-box"
			id="scrollBox"
			@mouseover="scrollStop"
			@mouseleave="scrollStart"
		>
			<ul>
				<li
					class="tr"
					v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
					:key="item"
				>
					<span class="col1">{{ item }}</span>
					<span class="col2">村民自建房</span>
					<span class="col3">20%</span>
					<span class="col4">300m</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: '',
	data() {
		return {}
	},
	mounted() {
		this.scrollStart()
	},
	beforeDestroy() {
		this.scrollStop()
	},
	methods: {
		scrollStart() {
			// 拿到表格中承载数据的div元素
			const scrollBox = document.getElementById('scrollBox')
			// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
			this.scrollTimer = setInterval(() => {
				// 元素自增距离顶部1像素
				scrollBox.scrollTop += 2
				// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
				if (
					scrollBox.clientHeight + scrollBox.scrollTop ==
					scrollBox.scrollHeight
				) {
					// 重置table距离顶部距离
					scrollBox.scrollTop = 0
				}
			}, 30) // 滚动速度
		},

		scrollStop() {
			if (this.scrollTimer !== undefined) {
				clearInterval(this.scrollTimer)
			}
		},
	},
}
</script>
<style lang="less" scoped>
.table {
	height: 100%;
	font-size: 28px;
	font-family: Microsoft YaHei UI;
	color: #fff;

	.th {
		background: rgba(0, 150, 255, 0.5);
		height: 70px;
		line-height: 70px;
	}

	.roll-box {
		height: calc(100% - 70px);
		overflow-y: auto;
		ul {
			top: 0;
			margin: 0;
			padding: 0;
			width: 100%;
			.tr {
				background: rgba(0, 150, 255, 0.3);
			}
		}
	}
	.th,
	.tr {
		display: flex;
		margin-top: 6px;
		span {
			height: 68px;
			line-height: 68px;
			padding: 0 10px;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.col1 {
			width: 10%;
		}
		.col2 {
			width: 45%;
		}
		.col3 {
			width: 15%;
		}
		.col4 {
			width: 30%;
		}
	}
}
</style>