中奖列表滚动

<template>
	<view>
		
		<!-- 中奖滚动 -->
		<div class="prize-ul">
			<div ref="refRoll" :class="{anim:animate==true}">
				<div class="prize-li" v-for="(item,index) in prizeList" :key="index">
					<image class="notice" src="../static/index/notice.png" mode="widthFix"></image>
					<div class="people">VIP{{item.mobile.substr(0,3) + "****" + item.mobile.substr(7, 4)}}晋级领取{{item.备注}}</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				prizeList: [
					{
						mobile:'12345678910',
						备注:'奖品1'
					},
					{
						mobile:'123',
						备注:'奖品1'
					},
					{
						mobile:'456',
						备注:'奖品1'
					},
					{
						mobile:'789',
						备注:'奖品1'
					},
					{
						mobile:'98710123456',
						备注:'奖品1'
					}
					
				], // 滚动中奖记录
				animate: false, //中奖记录滚动
			};
		},
		onLoad() {
			
			//  每秒执行一次-滚动
			this.rollEvent = setInterval(this._rollApi, 1000)
		},
		methods:{
			_rollApi() {
				let refRollDiv = this.$refs.refRoll;
			
				refRollDiv.style.marginTop = '-24px';
			
				this.animate = !this.animate;
				
				var that = this;
				setTimeout(function() {
                    // 把数组中的第一个对象放到最后一个
					that.prizeList.push(that.prizeList[0]);
					that.prizeList.shift();
					refRollDiv.style.marginTop = '0px';
					that.animate = !that.animate;
				}, 500)
			
			}
		}
	}
</script>

<style lang="scss">
	
	.prize-ul {
		width: 500rpx;
		height: 50rpx;
		overflow: hidden;
		margin: 0 auto;
		// margin-left: 70rpx;
		margin-top: 10rpx;
	
		.prize-li {
			display: flex;
			align-items: center;
			justify-items: center;
			padding: 10rpx 0 10rpx 25rpx;
	
			.notice {
				width: 24rpx;
				height: 20rpx;
			}
	
			.people {
				font-family: Source Han Sans SC;
				font-size: 10px;
				text-align: left;
				text-indent: 1em;
			}
	
		}
	
	}
	
</style>