之前有一个项目中需要实现消息向上的无缝滚动效果，今天我们就来总结一下如何使用 Vue 来实现消息的无缝滚动效果。
一、效果预览
本演示效果的框架是基于 Vue-Cli 搭建
二、template 代码
- <template>
- <div id="box">
- <ul id="content" :class="{anim:animate==true}">
- <li v-for='item in items'>{{item.name}}</li>
- </ul>
- </div>
- </template>
三、script 代码
- <script>
- export default {
- data() {
- return {
- animate:false,
- items:[
- {name:"No1..."},
- {name:"No2..."},
- {name:"No3..."},
- {name:"No4..."},
- {name:"No5..."},
- {name:"No6..."},
- {name:"No7..."},
- {name:"No8..."},
- {name:"No9..."},
- {name:"No10.."}
- ]
- }
- },
- created(){
- setInterval(this.scroll,1000)
- },
- methods: {
- scroll(){
- this.animate=true;
- setTimeout(()=>{
- this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
- this.items.shift(); // 删除数组的第一个元素
- this.animate=false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
- },500)
- }
- }
- }
- </script>
四、style 代码
- <style scoped>
- *{
- margin: 0 ;
- padding: 0;
- }
- #box{
- width: 200px;
- height: 32px;
- overflow: hidden;
- padding-left: 30px;
- border: 1px solid black;
- margin: 0 auto;
- }
- .anim{
- transition: all 0.5s;
- margin-top: -30px;
- }
- #content li{
- list-style: none;
- line-height: 30px;
- height: 30px;
- }
- </style>
总结：以上全部代码就能实现消息向上的无缝滚动效果~~~
博主只是一名前端的小白，只是把自己用到的知识分享一下，要是有什么不对的地方，欢迎大家提出~~
继续阅读
评论