<template>
	<view>
		<view class="search-input-box">
			<view class="search-scroll" :class="{aniamtedTop}">
				<view class="search-list" v-for="(item,index) in searchList">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aniamtedTop:false,
				searchList:[
					{
					    content:"上海周边·酒店",
					},{
						content:"北京到上海机票",
					},{
						content:"如果是一条很长很长的消息，超出给定宽度用省略号代替",
					}	
				]
			}
		},
		mounted(){
			setInterval(this.scroll,3000)
		},
		methods: {
			scroll(){
				this.aniamtedTop = true;
				setTimeout(()=>{
					this.searchList.push(this.searchList[0])     // 把第一条放到数组末尾
					this.searchList.shift()        // 删除第一条
					this.aniamtedTop = false;
				},500)
			}
		}
	}
</script>

<style>
	.aniamtedTop{
		transition: all 0.5s;
		margin-top: -60rpx;
	}
	.search-input-box{
		width: 630rpx;
		height: 60rpx;
		margin: 10rpx auto;
		overflow: hidden;
	}
	.search-scroll{
		height: 50rpx;
	}
	.search-list{
		line-height: 60rpx;
		height: 60rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>