vue实现消息的无缝滚动效果
2018-03-14 09:10
681 查看
vue实现消息的无缝滚动效果(完善版)
javascriptvue.js
candy 2017年12月04日发布赞 | 2收藏 | 3
1.3k 次浏览
在昨天发布完文章之后又整理一下,发现有几处需要改进的地方,今天就及时更新一下,也算是激励自己要保持这种积极的好习惯项目环境vue-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法第一步在模板中 使用v-for方法循环出消息列表<script>
export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军"}, {name:"王勤"} ] } }, created(){ setInterval(this.scroll,1000) }, methods: { scroll(){ this.animate=true; // 因为在消息向上滚动的时候需要添加css3过渡动画,所以这里需要设置true setTimeout(()=>{ // 这里直接使用了es6的箭头函数,省去了处理this指向偏移问题,代码也比之前简化了很多 this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的 this.items.shift(); //删除数组的第一个元素 this.animate=false; // margin-top 为0 的时候取消过渡动画,实现无缝滚动 },500) } }}
</script>样式设置<style>
*{ margin: 0 ; padding: 0; } #box{ width: 300px; height: 32px; overflow: hidden; padding-left: 30px; border: 1px solid black; } .anim{ transition: all 0.5s; margin-top: -30px; } #con1 li{ list-style: none; line-height: 30px; height: 30px; }</style>
html
以上就是这篇文章的全部内容,希望对大家有帮助,也请多多指教,谢谢!
相关文章推荐
- vue实现消息的无缝滚动效果的示例代码
- JS实现图片无缝滚动效果
- 基于javascript实现文字无缝滚动效果
- jQuery动画效果实现图片无缝连续滚动
- JavaScript实现简单精致的图片左右无缝滚动效果
- JQuery实现文字无缝滚动效果示例代码(Marquee插件)
- winfrom api发送消息,实现滚动效果(重绘滚动条用)
- 基于javascript实现文字无缝滚动效果
- jQuery动画效果实现图片无缝连续滚动
- JS与HTML结合使用marquee标签实现无缝滚动效果代码
- JavaScript实现走马灯效果[无缝连接、循环滚动] 向上
- JavaScript实现一个最基本的图片无缝横向滚动效果
- 使用dwr3.0实现服务端向浏览器做消息推送,做滚动评论或弹幕效果,而且根据视频id做推送消息拦截功能
- jQuery插件scroll实现无缝滚动效果
- js实现无缝滚动效果
- better-scroll在vue中实现原生滚动和上拉/下拉加载的效果
- JS实现模拟新浪微博大厅和腾讯微博首页微博消息滚动效果
- marquee标签实现跑马灯效果--无缝滚动
- vue.js-div滚动条隐藏但有滚动效果的实现
- JQuery实现文字无缝滚动效果(Marquee插件)