vue列表循环滚动_html-js-css

vue PC端列表循环滚动功能介绍：大致需求：整体思路：效果展示：完整代码：

功能介绍：

在PC端网页，包括大数据、官网、后台管理平台开发中，可能会用到这种列表循环滚动的展示。

大致需求：列表可以使用数组循环遍历；每隔几秒中列表数据向上滚动一定距离，展示下一条数据；滚动到最后一条数据时重新显示第一条开始的数据（类似走马灯、banner图的循环效果）；整体思路：使用两个定时器嵌套实现；需要两个相同容器存放同样内容，实现无缝衔接效果；效果展示：

完整代码：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js">script>
		<style>
			/* 滚动表格最外层 */
			.tableoOut {
				margin: 100px auto;
			    width: 500px;
			    height: 400px;
				background: pink;
			    overflow: hidden;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    flex-direction: column;
			}
			.tableBox {
			    width: 100%;
				background: #000;
			    overflow: hidden
			}
			.tableTit {
				background: #000;
			    width: 100%;
			    height: 40px;
			    color: #858A84;
			    text-align: center;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			}
			.tableInner {
			    height: auto;
			}
			.box {
			    width: 100%;
			    height: 50px;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    color: #fff;
			}
			.box .time {
			    color: #858A84;
			}
			.tableoOut .addr, .tableoOut .time, .tableoOut .name {
			    box-sizing: border-box;
			    padding: 0 5px;text-align: center;
			    overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.tableoOut .addr {
			    width: calc(100% - 200px);
			    flex-shrink: 0;
			}
			.tableoOut .name, .tableoOut .time {
			    width: 100px;
			    flex-shrink: 0;
			}
		style>
	head>
	<body>
		<div id="app">
			<div class="tableoOut" ref="tableoOut">
				<div class="tableTit">
					<div class="name">姓名div>
					<div class="addr">地址div>
					<div class="time">入驻时间div>
				div>
				<div class="tableBox" ref="tableBox"
					:style="{height: tableHei}">
					<div class="tableInner" ref="tableInner">
						<div class="box" v-for="item in 7" :key="item">
							<div class="name">{{item}}div>
							<div class="addr">山东省山东省山东省山东省山东省山东省山东省山东省
							山东省山东省山东省山东省山东省div>
							<div class="time">2022-05-26div>
						div>
					div>
					<div class="tableInner" v-if="size < 7">
						<div class="box" v-for="item in 7" :key="item">
							<div class="name">{{item}}div>
							<div class="addr">山东省山东省山东省山东省山东省山东省山东省山东省
							山东省山东省山东省山东省山东省div>
							<div class="time">2022-05-26div>
						div>
					div>
				div>
			div>
		div>
	body>
	<script>
		new Vue({
			el: '#app',
			data: {
				tableHei: 'auto',
				timer: null,
				size: 0
			},
			mounted() {
				this.getTable();
			},
			methods: {
				getTable() {
					const outHei = this.$refs.tableoOut.clientHeight - 60;
					this.size = Math.floor(outHei / 50);
					this.tableHei = this.size * 50 + 'px';
					this.scrolls();
				},
				stepScroll() {
					const step = 50;
					let num = 0;
					const tableBox = this.$refs.tableBox;
					const stepTime = setInterval(function () {
						num += 2;
						if (num > step) {
							num = 0;
							clearInterval(stepTime);
						} else {
							tableBox.scrollTop += 2;
						}
					}, 20);
				},
				scrolls() {
					const that = this;
					const tableBox = this.$refs.tableBox;
					const tableInner = this.$refs.tableInner;
					clearInterval(this.timer);
					this.timer = setInterval(function () {
						if(tableBox.scrollTop === tableInner.scrollHeight) {
							tableBox.scrollTop = 0;
						}
						that.stepScroll();
					}, 2000);
				},
			}
		})
	script>
html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1322017.html

vue列表循环滚动

发表评论

评论列表（0条）