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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)