css實現滾屏展示效果

我這裏是20條數據循環展示，頁面同時能展示四條數據，一次循環20s

實現無縫滑動需要把前四條數據加到最後，否則會出現數據瞬變（因爲循環結束會瞬間拉回，原來位置重新向下滑動），也就是有24條數據

不說廢話，直接上代碼

實現滑動功能的主要代碼

@keyframes myMove {
	  0% {
	    transform: translateY(0);
	  }
	  100% {
	    transform: translateY(-500%);//我是按百分比設定高度，所以下滑的距離是5*height
	  }
	}

animation: myMove 20s linear infinite;
		animation-fill-mode: forwards;

 

 

整個組件代碼

<template>
	<div style="width: 100%;height: 100%;">
		<div class="title">
			<div class="list-title">地區</div>
			<div class="list-title">用戶名</div>
			<div class="list-title">回收物</div>
			<div class="list-title">回收量</div>
			<div class="list-title">時間</div>
		</div>
		<div class="infos" >	
				<ul id="scroll-data">	
					<!-- <li class="info">
							<div class="list-info">小區</div>
							<div class="list-info">小區</div>
							<div class="list-info">小區</div>
							<div class="list-info">小區</div>
							<div class="list-info">小區1</div>
					</li> -->
		
				</ul>
				
		</div>
	</div>
</template>

<script>
	export default {
		name: 'scroll',
		props:['scrolldata'],
		data() {
			return {
				

			}
		},
		methods: {
			
		},
		watch:{
			scrolldata(newval,oldval){
				var cent = document.getElementById("scroll-data");
				cent.innerHTML=''
				if(newval.length!==0){
					for(var i = 0; i < newval.length; i++) {
						cent.innerHTML += "<li class='info'>"+ 
									"<div  class='list-info'>" + newval[i].comminName + "</div>"+
									"<div class='list-info'>" + newval[i].userName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageTypeName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageNumber + "</div>" +
									"<div class='list-info'>" + newval[i].recycleTime + "</div>" +
									"</li>";
					}
					for(var i = 0; i < 4; i++) {
						cent.innerHTML += "<li class='info'>"+ 
									"<div  class='list-info'>" + newval[i].comminName + "</div>"+
									"<div class='list-info'>" + newval[i].userName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageTypeName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageNumber + "</div>" +
									"<div class='list-info'>" + newval[i].recycleTime + "</div>" +
									"</li>";
					}
				}
			}
		}
	}
</script>

<style>
	.title{
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.list-title{
		width:20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		font-weight: 700;
		color: #FFFFFF;
	}
	.infos{
		width: 100%;
		height: 80%;
		overflow: hidden;
		text-align: center;
	}
	
	@keyframes myMove {
	  0% {
	    transform: translateY(0);
	  }
	  100% {
	    transform: translateY(-500%);
	  }
	}
	
	.infos>ul{
		animation: myMove 20s linear infinite;
		animation-fill-mode: forwards;
		width: 100%;
		height: 100%;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.infos>ul>li{
		width: 100%;
		height: 25%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.list-info{
		width:20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>