vue實現(xiàn)無縫滾動的示例詳解

更新時間：2023年09月06日 08:42:11 作者：Maidangchen

這篇文章主要為大家詳細介紹了vue非組件如何實現(xiàn)列表的無縫滾動效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

vue非組件實現(xiàn)列表的無縫滾動問題（小編能力有限，如有更好方法還請大佬指點一二）

*原理：首先循環(huán)兩遍數(shù)組，當(dāng)容器滾去第一個數(shù)組高度的時候，第二個數(shù)組剛好填滿容器，這時候?qū)L去高度設(shè)置為0則可以實現(xiàn)無縫滾動。

*簡易原理圖如下

話不多說直接上代碼：

1.采用js的方法實現(xiàn)

<template>
	<div>
		<div class="box">
			<div v-for="item in 2" class="item-box" :style="{transform:'translate(0,'+scrollTop+'px)'}">
				<div class="item" v-for="i in 9">{{i}}</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				scrollTop: 0,
			}
		},
		onLoad() {
			this.roll()
		},
		methods: {
			roll() {
				if (this.scrollTop == -300) {
					this.scrollTop = 0
				}
				this.scrollTop -= 1;
				setTimeout(() => {
					this.roll()
				}, 10)
			},
		}
	}
</script>
<style>
	.box {
		width: 320px;
		height: 300px;
		background-color: pink;
		overflow: hidden;
	}
	.box .item-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	.box .item-box .item {
		width: 29%;
		height: 29%;
		margin: 1%;
		background-color: paleturquoise;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
	}
</style>

2.css動畫實現(xiàn)

<template>
	<div>
		<div class="box">
			<div v-for="item in 2" class="item-box">
				<div class="item" v-for="i in 9">{{i}}</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
		}
	}
</script>
<style>
	.box {
		width: 320px;
		height: 300px;
		background-color: pink;
		overflow: hidden;
	}
	.box .item-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		animation: roll 5s linear infinite;
	}
	.box .item-box .item {
		width: 29%;
		height: 29%;
		margin: 1%;
		background-color: paleturquoise;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
	}
	@keyframes roll {
		0% {
			transform: translate(0, 0px);
		}
		20% {
			transform: translate(0, -60px);
		}
		40% {
			transform: translate(0, -120px);
		}
		60% {
			transform: translate(0, -180px);
		}
		80% {
			transform: translate(0, -240px);
		}
		100% {
			transform: translate(0, -300px);
		}
	}
</style>

到此這篇關(guān)于vue實現(xiàn)無縫滾動的示例詳解的文章就介紹到這了,更多相關(guān)vue無縫滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: