Vue Notice消息无缝滚动

灰太狼 2023-02-14 13:25 96阅读 0赞

[https://www.cnblogs.com/conglvse/p/9988134.html][https_www.cnblogs.com_conglvse_p_9988134.html]

![format_png][]   
vue实现消息向上无缝滚动效果

<div class="notice">
              <ul :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
                <li class="h" v-for="(item,index) in noticeList" :key="index">{
       {item.name}}</li>
              </ul>
            </div>

<script>
      export default {
        data() {
          return {
            noticeList: [],
            animate:false,
            intNum: undefined,
          }
        },
        created: function () {
          this.ScrollUp();
        },
        methods: {
          ScrollUp() {
            this.intNum = setInterval(() => {
              this.animate=true;// 向上滚动的时候需要添加css3过渡动画
              setTimeout(()=>{
                this.noticeList.push(this.noticeList[0]);// 将数组的第一个元素添加到数组的
                this.noticeList.shift(); //删除数组的第一个元素
                this.animate=false;
              },500)
            }, 10000);
          },
          //鼠标移上去停止
          Stop() {
            clearInterval(this.intNum);
          },
          Up() {
            this.ScrollUp();
          },
        }
      }
    </script>

样式:

.notice ul{
      transition: top 0.5s;
    }
    .notice ul li {
      list-style: none;
      padding-left: 0.1rem;
      line-height: 0.9rem;
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 0.28rem;
    }
    .anim{
        transition: all 0.5s;
        margin-top: -0.9rem; /*高度等于行高*/
    }

[https_www.cnblogs.com_conglvse_p_9988134.html]: https://www.cnblogs.com/conglvse/p/9988134.html
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzU1ODQ4LzIwMTgxMS83NTU4NDgtMjAxODExMjAxMjAxMjE4MzktMTcwNDA1ODk1Ni5wbmc?x-oss-process=image/format,png

发表评论取消回复

表情：

评论列表（有 0 条评论，96人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue Notice消息无缝滚动

[https://www.cnblogs.com/conglvse/p/9988134.html][https_www.cnblogs.com_conglvse_p_99881

灰太狼/ 2023年02月14日 13:25/ 0 赞/ 97 阅读

相关制作列表无缝滚动 vue-seamless-scroll

安装 npm install vue-seamless-scroll --save 在main.js文件里引用 import scroll from 'v

ゝ一纸荒年。/ 2023年01月06日 11:51/ 0 赞/ 230 阅读

相关 vue文字间歇无缝向上逐个滚动

<div class="marquee-wrap"> <ul class="marquee-list" :class="{'animate-up':

刺骨的言语ヽ痛彻心扉/ 2022年12月24日 01:57/ 0 赞/ 387 阅读

相关 vue文字无缝滚动插件vue-seamless-scroll

订阅专栏（1）安装执行命令 npm install vue-seamless-scroll --save （2）在main.js文件里面引入使用： impo

￡神魔★判官ぃ/ 2022年09月07日 14:56/ 0 赞/ 604 阅读

相关 vue无缝滚动组件-vue-seamless-scroll

![20210809111621583.gif][] 下载 cnpm i -S vue-seamless-scroll main.js中引入：

亦凉/ 2022年09月04日 00:43/ 0 赞/ 211 阅读

相关 marquee无缝滚动

marquee无缝滚动利用i5scroll进行二次封装 > 为了满足工作需求进行二次封装 ~(function ($, window, document,

布满荆棘的人生/ 2022年08月30日 11:39/ 0 赞/ 185 阅读

相关 vue无缝滚动列表插件vue-seamless-scroll使用|vue无缝滚动列表实现

[vue-seamless-scroll（文档里面没有使用方式）][vue-seamless-scroll] 1.安装 cnpm install vue-s

叁歲伎倆/ 2022年08月30日 04:26/ 0 赞/ 541 阅读

相关 vue-seamless-scroll实现无缝上下滚动与左右滚动

vue-seamless-scroll实现无缝上下滚动与左右滚动上下滚动与左右滚动是我们很常见的一个功能，利用vu

╰半橙微兮°/ 2022年03月29日 14:48/ 0 赞/ 604 阅读

相关 Vue实现天气预报无缝滚动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

绝地灬酷狼/ 2021年10月23日 12:46/ 0 赞/ 655 阅读

相关 Vue无缝滚动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

我就是我/ 2021年09月03日 04:01/ 0 赞/ 455 阅读