vue中信息条无缝对接

<template>
	<view class="abc">
		<view>{{arrList[activeIndex]}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				arrList: [
					'1、The world is boring,but it has you',
					'2、Life is all about you.',
					'3、I want to see you far away.',
					'4、You are happy at this time.'
				]
			}
		},
		created() {
			this.hhh()
		},
		methods: {
			hhh() {
				setInterval(() => {
					this.activeIndex++;
					if (this.activeIndex > this.arrList.length - 1) {
						this.activeIndex = 0
					}
				}, 1000)
			}
		}
	}
</script>

<style>
	.abc {
		width: 500rpx;
		height: 50rpx;
		border: 1rpx solid red;
		overflow: hidden;
	}
</style>