vue实现通知消息上下滚动效果

最新推荐文章于 2025-03-18 10:59:57 发布

小黑学IT

最新推荐文章于 2025-03-18 10:59:57 发布

阅读量3.6k

点赞数 3

分类专栏：前端学习文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_43804570/article/details/125618933

版权

前端学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用Vue.js实现通知消息的上下滚动效果。通过HTML、CSS及JavaScript代码，详细展示了消息列表滚动的具体实现过程，包括过渡动画效果及无缝滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue实现通知消息上下滚动效果

1，html

<!--  通知消息滚动模板    -->
      <div class="box">
        <ul class="con1" ref="con1" :class="{anim:animate==true}">
          <li v-for='item in messageList'><img style="height: 0.267rem" :src='require("assets/img/self/hd.png")' >{{item.infoContent.substring(0,20)+'...'}}<span style="color: #999999;font-size: 0.053rem;float: right;margin-right: 0.18rem">{{item.createTime | dateYMD }}</span></li>
        </ul>
      </div>

2，CSS

.box{
    width: 98%;
    height: 64px;
    overflow: hidden;
    margin-left: 1.5%;
    margin-top: 0.533rem;
    background: #f9f9f9;
    border-radius: 0.213rem;
  }
  .anim{
    transition: all 0.5s; 
    margin-top: -30px;
  }
  .con1 li{
    list-style: none;
    line-height: 30px;
    height: 30px;
    font-size: 0.053rem;
  }

3，JS

created() {
    // 定时触发滚动函数
    setInterval(this.messagescroll,2000)
  },

methods:{
//通知消息滚动函数
    messagescroll(){
      this.animate=true;    // 开启过渡动画
      setTimeout(()=>{
        this.messageList.push(this.messageList[0]);  // 将数组的第一个元素追加到数组最后面
        this.messageList.shift();               //然后删除数组的第一个元素
        this.animate=false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      },3500)
    },
    }

 data() {
    return {
      animate:false, //控制过渡动画是否开启
      messageList:[],//通知消息列表
     }
   }

4，实现效果

在这里插入图片描述