UNIAPP上下滑动跑马灯

<template>
	<view>
		<view class="box">
			<view :style="{ transform: 'translateY(' + (-scrollHegiht) + 'px)' }">
				<view v-for="(item, index) in list" :key="index" class="list">{{ item }}</view>
			</view>
		</view>
		<button @click="animations" type="default">开始</button>
		<button @click="stop" type="default">停止</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [1,2,3,4,5,6,7,8],
			timer: null,
			// 原数据个数
			listTotal: 0,
			// 向上平移量
			scrollHegiht: 1,
			// 滚动区域高度
			boxheight: uni.upx2px(500),
			// 内容高度与间距
			contentHeight: uni.upx2px(100),
		}
	},
	onReady() {
		 this.listTotal = this.list.length
		 this.animations()
	},
	onUnload() {
		this.stop()
	},
	methods: {
		stop() {
			clearInterval(this.timer)
			this.timer = null
		},
		animations() {
			this.timer = setInterval(() => {
				this.scrollHegiht += 1
				// 如果内容的高度 - 滚出去的高度 = 显示区域盒子的高度，就在这个数组后添加一个它自己
				if (this.contentHeight * this.list.length - this.scrollHegiht === this.boxheight) {
					this.list = [...this.list, ...this.list]
				}
				// 如果滚出的高度大于或者等于第一加载的内容高度（没有添加过数组的内容高度），就把刚刚添加的数组删除掉
				if (this.scrollHegiht >= this.listTotal * this.contentHeight) {
					this.list = this.list.slice(this.listTotal, this.list.length)
					this.scrollHegiht = 0
					this.stop()
				}
			}, 50)
		}
	}
}
</script>

<style>
	.box {
		overflow: hidden;
		width: 100%;
		height: 500rpx;
	}
	
	.list {
		width: 100%;
		height: 80rpx;
		line-height: 100rpx;
		margin-bottom: 20rpx;
		text-align: center;
		background-color: #007AFF;
	}
</style>