<div class="news">
<img
class="homeWarning"
src="../assets/images/home_warning.png"
alt=""
/>
<span class="txt">【严重】</span>
<div class="homeText" ref="scroll_div">
<div ref="scroll_begin" @click="jumpEventPage">
暂无严重通报
</div>
<div ref="scroll_end"></div>
</div>
</div>
//消息栏消息滚动
ScrollImgLeft() {
const vm = this;
var speed = 50; //初始化速度 也就是字体的整体滚动速度
var MyMar = null; //初始化一个变量为空 用来存放获取到的文本内容
var length = vm.showData.alertList.length;//滚动消息列表的长度
var scroll_begin = vm.$refs.scroll_begin;
var scroll_end = vm.$refs.scroll_end;
var scroll_div = vm.$refs.scroll_div;
//循环方法
function Loop(n) {
scroll_div.scrollLeft = 0;
return new Promise(res => {
scroll_begin.innerHTML = `${vm.showData.alertList[n].alertName}                          `;
setTimeout(() => {
MyMar = setInterval(() => {
var left = scroll_div.scrollLeft++;
if (left == scroll_div.scrollLeft) {
clearInterval(MyMar);
setTimeout(() => {
res(true);
}, 1000);
}
}, speed);
}, 2000);
});
}
async function Circle() {
for (var n = 0; n < length; n++) {
vm.currentNewsData=vm.showData.alertList[n];
let result = await Loop(n);
// console.log(result);
if (n + 1 == length) {
Circle();
}
}
}
Circle();
效果:
可以从右向左进行消息滚动。