vue悬浮 内容滚动实现_vue 实现文字无缝滚动效果（从下往上滚动）

需求：对中奖用户进行滚动效果展示

这种效果需求还是蛮多的，想起之前用JQuery实现的一个无缝滚动( 缅怀过去)，是通过jq的animate方法实现的，动画结束之后就将第一个元素appendTo追加到最后面，实现循环滚动特效，不得不感叹技术更新换代真的很快。

回到现在Vue的项目，本来想用插件，但是觉得这么一个小动画用插件有点太重了，还是自己写一个比较好。

实现原理

实现原理也比较简单

对整个列表实现上移动画

将列表的第一个数据移动到最后一个

因为vue是基于数据驱动的，所以，对我们开发者来说，直接操控数组，删除第一个数组数据，然后追加到数组后面就好了。

点此查看实现效果以及源码预览可以略过下面的内容

template 部分

• { {item}}

script部分

export default {

name: "marquee-up",

data() {

return {

animateUp: false,

listData: ['12***ve 成功邀请12人 已获奖金60元', 'l***e 成功邀请5人 已获奖金40元', 'l***e 成功邀请1人 已获奖金5元'],

timer: null

}

<