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)

相关推荐

  • vue实现横屏滚动公告效果

    本文实例为大家分享了vue实现横屏滚动公告效果的具体代码,供大家参考,具体内容如下 HTML文件 <template>   <div id="box" ref="box">     <div class="marquee-box" ref="marquee" @mouseover="menter" @mouseleave="mleave">      

  • vue实现列表垂直无缝滚动

    本文实例为大家分享了vue实现列表垂直无缝滚动的具体代码,供大家参考,具体内容如下 实现新闻列表的轮播(如下图) 上代码 封装的so-marquee.vue <template>     <div         class="marquee-wrapper"         :style="{ width: realWidth + 'px' }"     >         <div             class="m

  • Vue替代marquee标签超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的) 安装 # install dependencies npm i marquee-components 使用 在main.js引入 import marquee from 'marquee-components' Vue.use(marquee ); 在页面使用 <template> <div id="app"> <marquee :val="msg"></marquee>

  • vue 监听某个div垂直滚动条下拉到底部的方法

    如下所示: this.$nextTick(() => { const el = document.querySelector('.act-not'); const offsetHeight = el.offsetHeight; el.onscroll = () => { const scrollTop = el.scrollTop; const scrollHeight = el.scrollHeight; if ((offsetHeight + scrollTop) - scrollHeig

  • vue实现消息的无缝滚动效果的示例代码

    朋友的项目里要实现一个消息无缝滚动的效果,中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题,我研究了一天终于解决了这个1S的小问题 项目环境vue-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法 第一步在模板中 使用v-for方法循环出消息列表 <template> <div id="box"> <ul id="con1" ref="con1" :class="

  • vue实现文字滚动效果

    本文实例为大家分享了vue实现文字滚动效果的具体代码,供大家参考,具体内容如下 项目需求:系统公告,要从右忘左循环播放的牛皮广告效果. 实现: 方案一:使用定时器和CSS3的过渡属性来实现. <template>   <div class="notice-card-wrapper">         <div id="message-wrap" ref="out" class="message"&

  • vue通过定时器实现垂直滚动公告

    前言 最近项目有个需求是做一个垂直滚动的公告,其中也涉及到了设置定时器和清除定时器方面的知识点,在这里记录下过程,不对的地方欢迎大家指正,一起共同进步! 思路 1. 写好样式,把滚动的内容循环出来,固定显示区域的高度,超出隐藏2. 设置定时器,将第一条数据塞到最后一个,删除第一条数据,暂停播放3. 在mounted中创建并执行定时器4. destroyed中清除定时器 HTML部分 <div class="roll">       <div class="r

  • Vue实现跑马灯样式文字横向滚动

    本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下 需求: 在Vue项目的顶部,来实现文字左右滚动 步骤: 1.可以自己封装一个组件,也可以自己写,也可以复制以下代码 2.封装完成以后要在所需的组件中引入,注册,并使用 代码: 封装一个专门用来实现跑马灯效果的组件marquee组件 <template> <!-- 跑马灯组件 --> <div class="marquee-wrap" ref="marquee

  • Vue中消息横向滚动时setInterval清不掉的问题及解决方法

    最近在做项目时,需要进行两个组件联动,一个轮询获取到消息,然后将其传递给另外一个组件进行横向滚动展示,结果滚动的速度越来越快.这里记录一下来提醒自己.消息滚动的代码在最下面,方便下次使用. 问题背景: 最近在做一个需求,组件A获取消息采用的是轮询,组件A获取到新的消息后,将组件A中的消息传递给另外一个组件B,当组件B接收到消息时就让消息在页面上滚动播放. 实现思路: 这个项目应用的框架为VUE,当组件A获取到新的消息之后,就触发中央事件总线,在组件B中进行事件监听,将其添加进入一个数组,当判断定

  • vue实现公告栏文字上下滚动效果的示例代码

    本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text

随机推荐