uni-app无限滚动

uni-app无限滚动

<template>
	<view>
		<view class="roll">
			<view class="roll_con">
				<view class="roll_list" v-for="(item,index) in rollList" :key="index" :animation="animationData">
					<view class="roll_dot">view>
					<view class="roll_title">{{item.title}}view>
				view>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				rollList:[
					{title:'11111111111111111111111111111111111'},
					{title:'22222222222222222222222222222222222'},
					{title:'33333333333333333333333333333333333'},
					{title:'44444444444444444444444444444444444'},
					{title:'55555555555555555555555555555555555'},
					{title:'66666666666666666666666666666666666'},
					{title:'77777777777777777777777777777777777'},
					{title:'88888888888888888888888888888888888'}
				],
				animationData:{}
			}
		},
		onReady() {
			let animation = uni.createAnimation({
				transformOrigin: "50% 50%",
				duration:1000,
				timingFunction: "linear",
				delay: 0
			})
			this.animation = animation;
			this.animations()
		},
		onLoad() {
			
		},
		methods: {
			// 滚动
			animations(){
				let i = -1;
				let j = 0;
				let sum = this.rollList.length;
				setInterval(()=>{
					if(i == sum){
						i = 0;
					}
					setTimeout(()=>{
						let arr = this.rollList.splice(i,1)[0];
						this.rollList.push(arr);
						this.rollList.splice(i,0,arr);
					},500)
					i++;
					j++;
					this.animation.translateY(-24 * j).step()
					this.animationData = this.animation.export();
				},1000)
			}
		}
	}
</script>

export 方法每次调用后会清掉之前的动画操作