css固定区域数据滚动

html

<div class="weatherMain">
	<div :style="{'marginTop':marginTop+'px'}">
		<div class="weatherLine" v-for="(item, index) in weatherList" :key="index">
			<div style="flex: 0.3">{{ item.name }}</div>
		</div>
	</div>
	
</div>

data

marginTop:0,     // 数据的margin-top
timer:''     ,// 定时器
weatherList:[],//数据

方法

this.getWeatherList();//天气
this.timer= setInterval(this.showNotice, 100)   //100表示间隔时间，数字越大滚得越快

// 数据循环滚动
showNotice(){
  this.marginTop -= 1
  if(this.marginTop < -32){     // 滚上去36px后把前两条数据拉下来
	this.weatherList.push(this.weatherList[0])
	this.weatherList.shift()
	this.marginTop = 0
  }
},
getWeatherList(){
	let data = {
		day : new Date().getFullYear() + '-' + (new Date().getMonth()+1 < 10 ? '0'+(new Date().getMonth()+1) : new Date().getMonth()+1) + '-' + (new Date().getDate()< 10 ? '0'+new Date().getDate() : new Date().getDate())
	}
	weatherStatistics(data)
		.then(res => {
			this.weatherList = res.data.slice(0,10);
			console.log(this.weatherList)
		})
		.catch(res => {
			this.$message.error(res.message);
		});

css

.weatherMain {
	height: 180px;
	overflow: hidden;
	.weatherLine {
		background: #242A53;
		border-radius: 5px;
	}
}

示例：