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 消息无缝滚动的更多相关文章

  1. vue实现无缝滚动

    vue实现无缝滚动 标签部分 <div style="height: 260px; width: 50%;display: inline-block;float: right; ove ...

  2. 基于vue的无缝滚动组件

    vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...

  3. vue的无缝滚动插件vue-seamless-scroll的安装与使用

    npm安装地址 https://www.npmjs.com/package/vue-seamless-scroll 命令行执行: npm install vue-seamless-scroll --s ...

  4. vue的无缝滚动插件vue-seamless-scroll的使用

    https://chenxuan0000.github.io/component-document/index_prod.html#/component/seamless-others 在vue环境下 ...

  5. vue 无缝滚动文字

    前言 用vue做无缝滚动,字体弹幕 就上代码吧 <head> <meta charset="UTF-8"> <style> div, ul, l ...

  6. vue实现消息的无缝滚动效果

    export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军" ...

  7. vue插件 vue-seamless-scroll 无缝滚动插件ES6使用总结

    最近因为需求需要写一个项目信息无缝向上滚动组件,在网上搜了一下,看到大家的一致好评就果断的使用了vue-seamless-scroll组件.下面就简单的介绍它的使用,具体详细的使用推荐大家去看下开发者 ...

  8. vue无缝滚动的插件开发填坑分享

    写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...

  9. vue 自定义marquee无缝滚动组件

    先上效果图: (1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的. (2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后.这 ...

随机推荐

  1. webpack02

    consumer-index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. Mybatis传多个参数(推荐)

    Dao层的函数方法 int deleteMsgById(@Param("name") String name,@Param("id") String id); ...

  3. Codefroces D2. Magic Powder - 2(二分)

    http://codeforces.com/problemset/problem/670/D2 http://codeforces.com/problemset/problem/670/D1 time ...

  4. 清空/var/adm/wtmp 文件内容

    清/var/adm/wtmp 文件内容 用于显示登录系统和重启机器的情况 /var/adm/wtmp文件过大. 可用du -sm /var/adm/wtmp查看 cat /dev/null>/v ...

  5. Deepin for Linux 下串口调试交换机

    最近因工作需要,在淘宝购买了一条宇泰的串口线:USB to RS232 之所以选择这款,主要是它支持 Windows.Linux.mac Linux机是Deepin for Linux,算是国产比较好 ...

  6. XTUOJ 1206 Dormitory's Elevator

    Dormitory's Elevator Time Limit : 1000 MS   Memory Limit : 65536 KB Problem Description The new dorm ...

  7. 深入理解Core Data

    留给我这忘事精看 Core Data 是什么? 大概八年前,2005年的四月份,Apple 公布了 OS X 10.4,正是在这个版本号中 Core Data 框架公布了.那个时候 YouTube 也 ...

  8. Image与byte[]数组的相互转换

         近期项目有个需求是关于图片操作的,须要将图片保存到数据库中.经过尝试才知道Image类型文件是不能直接存储到数据库中的.保存之前须要我们做一步转换:将Image转换成字节数组类型Byte ...

  9. 稀疏表示字典的显示(MATLAB实现代码)

    本文主要是实现论文--基于稀疏表示的图像超分辨率<Image Super-Resolution Via Sparse Representation>中的Figure2.通过对100000个 ...

  10. Javascript函数的基本概念+匿名立即执行函数

    函数声明.函数表达式.匿名函数 函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = f ...