Vue Notice消息无缝滚动

灰太狼 2023-02-14 13:25 103阅读 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 条评论，103人围观）

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

相关阅读

相关 Vue Notice消息无缝滚动

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

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

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

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

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

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

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

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

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

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

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

相关 marquee无缝滚动

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

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

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

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

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

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

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

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

相关 Notice-Message消息提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，

忘是亡心i/ 2022年03月22日 04:10/ 0 赞/ 275 阅读

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

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

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

相关 Vue无缝滚动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

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