Vue 实现消息的无缝滚动效果

  • A+
所属分类:前端开发

之前有一个项目中需要实现消息向上的无缝滚动效果,今天我们就来总结一下如何使用 Vue 来实现消息的无缝滚动效果。

一、效果预览

本演示效果的框架是基于 Vue-Cli 搭建

二、template 代码

  1. <template>
  2.     <div id="box">
  3.         <ul id="content" :class="{anim:animate==true}">
  4.             <li v-for='item in items'>{{item.name}}</li>
  5.         </ul>
  6.     </div>
  7. </template>

三、script 代码

  1. <script>
  2.     export default {
  3.         data() {
  4.             return {
  5.                 animate:false,
  6.                 items:[
  7.                     {name:"No1..."},
  8.                     {name:"No2..."},
  9.                     {name:"No3..."},
  10.                     {name:"No4..."},
  11.                     {name:"No5..."},
  12.                     {name:"No6..."},
  13.                     {name:"No7..."},
  14.                     {name:"No8..."},
  15.                     {name:"No9..."},
  16.                     {name:"No10.."}
  17.                 ]
  18.             }
  19.         },
  20.         created(){
  21.             setInterval(this.scroll,1000)
  22.         },
  23.         methods: {
  24.             scroll(){
  25.                 this.animate=true;
  26.                 setTimeout(()=>{
  27.                     this.items.push(this.items[0]);  // 将数组的第一个元素添加到数组的
  28.                     this.items.shift();              // 删除数组的第一个元素
  29.                     this.animate=false;  // margin-top 为0 的时候取消过渡动画,实现无缝滚动
  30.                 },500)
  31.             }
  32.         }
  33.     }
  34. </script>

四、style 代码

  1. <style scoped>
  2.     *{
  3.         margin: 0 ;
  4.         padding: 0;
  5.     }
  6.     #box{
  7.         width200px;
  8.         height32px;
  9.         overflowhidden;
  10.         padding-left30px;
  11.         border1px solid black;
  12.         margin: 0 auto;
  13.     }
  14.     .anim{
  15.         transition: all 0.5s;
  16.         margin-top: -30px;
  17.     }
  18.     #content li{
  19.         list-stylenone;
  20.         line-height30px;
  21.         height30px;
  22.     }
  23. </style>

总结:以上全部代码就能实现消息向上的无缝滚动效果~~~

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: