<template>
	<view class="list uni-flex uni-column">
		<view class="wrap-item">
			<view class="lis uni-flex uni-column" :animation="animationData">
				<view class="uni-flex uni-column item" :style="{background: bgColor,color:color}" v-for="(item, index) in list" :key="index">
					<view class="swiper-item item_title uni-flex list_item">
						<view class="time uni-flex-item justify-align-center uni-flex">{{ item.placeText }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array
		},
		bgColor: {
			type: String,
			default: 'rgba(229, 237, 240, 0.6)'
		},
		color: {
			type: String,
			default: '#333'
		}
	},
	data() {
		return {
			scrollHeight: 0, //向上滚动距离
			height: 0, //.lis高度（滚动框高度）
			animationData: {} //动画对象
		};
	},
	mounted() {
		this.prizeScroll();
	},
	methods: {
		getHeight(Class) {
			let query = uni.createSelectorQuery().in(this);
			query
				.selectAll(Class)
				.boundingClientRect(data => {
					this.height = data[0].height;
				})
				.exec();
		},
		prizeScroll() {
			let speed = 60;
			let animation = uni.createAnimation({
				duration: this.getHeight('.lis') / speed,
				timingFunction: 'linear',
				delay: 0
			});
			this.animation = animation;
			setInterval(() => {
				if (this.scrollHeight >= this.height) {
					animation.translateY(0).step();
					this.scrollHeight = 0;
					this.animationData = animation.export();
				} else {
					this.scrollHeight = this.scrollHeight + 1;
					animation.translateY(-this.scrollHeight).step();
					this.animationData = animation.export();
				}
			}, speed);
		}
	}
};
</script>

<style lang="less">
	.list {
		width: 60%;
		height: 2.6em;
		overflow: hidden;
		.item{
			background: rgba(229, 237, 240, 0.6);
			border-radius: 5em;
			padding: 0.2em 1em;
			font-size: 0.8em;
			margin:0.3em 0;
		}
	}
</style>
