vue实现竖屏滚动公告效果

本文实例为大家分享了vue实现竖屏滚动公告效果的具体代码，供大家参考，具体内容如下

html文件

<template>
<div class="scroll-wrap">
     <div
      class="scroll-content"
      :style="{ top }"
      @mouseenter="Stop()"
      @mouseleave="Up()"
     >
      <p v-for="item in reportList">
       恭喜{{ item.className }}{{ item.userName }}晋级为{{ item.level }}
      </p>
     </div>
  </div>
</template>

javascript文件

created(){
  this.getReportList();
  this.ScrollUp();
},
computed: {
  top() {
   return -this.activeIndex * 30 + "px";
  },
 },
methods: { 
  //查询晋级名单
  getReportList() {
   var vm = this;
   vm.$axios
    .get("/personResult/selectImprovementList")
    .then(function (response) {
     if (response.data.code === "0000") {
      vm.reportList = response.data.data;
     } else if (response.data.code === "1111") {
      vm.$message({
       message: response.data.message,
       type: "warning",
      });
     }
    });
  },
  //滚动播报方法
  ScrollUp() {
   this.intnum = setInterval((_) => {
    if (this.activeIndex < this.reportList.length) {
     this.activeIndex += 1;
    } else {
     this.activeIndex = 0;
    }
   }, 1000);
  },
  Stop() {
   clearInterval(this.intnum);
  },
  Up() {
   this.ScrollUp();
  },
}

css文件

.scroll-wrap {
 position: relative;
 z-index: 2;
 float: left;
 margin-left: 5%;
 overflow: hidden;
}
.scroll-content {
 position: relative;
 transition: top 0.5s;
}
.scroll-content p {
 /* 每行信息间隔高度 */
 line-height: 30px;
 font-size: 20px;
 color: yellow;
 text-align: center;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。