vue实现消息向上无缝滚动效果

这篇文章主要为大家详细介绍了vue实现消息向上无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现消息向上无缝滚动效果的具体代码，供大家参考，具体内容如下

代码：

<ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
  <li v-for="item in noticeList">
    ...
  </li>
</ul>

<script>
  export default {
    data() {
      return {
        noticeList: [],
        animate:false,
        intNum: undefined,
      }
    },
    created: function () {
      this.getNoticeData();
    },
    methods: {
      getNoticeData() {
        this.$http.get('/news/allList', {
          params: {
            'pageNumber': 10,
            'currentPage': 1
          }
        }).then(res => {
          this.noticeList = res.data.items;
          this.ScrollUp();
        });
      },
      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>

样式

.new-list{
    line-height: 28px;
    transition: top 0.5s;
}
.anim{
    transition: all 0.5s;
    margin-top: -28px;//高度等于行高
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• vue实现消息的无缝滚动效果的示例代码
• vue中使用vue-seamless-scroll插件实现列表无缝滚动效果
• 基于vue-seamless-scroll实现无缝滚动效果
• vue实现简单无缝滚动效果
• vue实现列表无缝滚动效果
• vue3实现CSS无限无缝滚动效果
• 基于vue.js无缝滚动效果
• vue实现消息无缝滚动效果