vue中的消息滚动栏

        <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} &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;`;
          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();

效果:

在这里插入图片描述
可以从右向左进行消息滚动。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值