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;
}

感谢阅读~

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张_Laura

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值