效果图:
时间这一列进行上下滚动循环。
<div id="map-container"></div>是用来加载地图的。此图片悬浮在地图右上角。
<div id="map-container">
<div class="wrn">告警列表</div>
<div id="list" class="marquee_list" :class="{marquee_top:animate}">
<div class="liItem" v-for="(item,index) in alarmList" :key="index">
<div class="top2">
<div class="item_each">{{item.startTime}}</div>
</div>
</div>
</div>
</div>
</div>
:class="{marquee_top:animate}"
这里为什么这么写,请移步这里:
https://cn.vuejs.org/v2/guide/class-and-style.html
data:
data() {
return {
animate: false,
}
},
style:
#grad1 {
//背景图片加载
background: url(../../../assets/wrnbackgrpound.png) no-repeat;
//z-index和position并用,实现图片悬浮在地图之上
z-index: 999;
position: fixed;
display: block;
top: 10;
right: 0;
width: 324px;
height: 453px;
}
.marquee_list {
position: relative;
overflow: hidden;
height: 333px;
}
.marquee_top {
transition: all 0.5s;
margin-top: -84px;
}
//实现上下滚动
scroll() {
const self = this;
self.animate = true;
setTimeout(() => {
self.alarmList.push(self.alarmList[0]); // 将数组的第一个元素添加到数组的
self.alarmList.shift(); //删除数组的第一个元素
self.animate = false;
}, 500)
},
//调接口
listDeviceWrn() {
listDeviceWrn().then(res => {
if (res.code === 200 && res.rows) {
this.alarmList = res.rows;
}
});
},