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怎么實現消息向上無縫滾動效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！