vue实现消息的无缝滚动效果的示例代码


Posted in Javascript onDecember 05, 2017

朋友的项目里要实现一个消息无缝滚动的效果,中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题,我研究了一天终于解决了这个1S的小问题

项目环境vue-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法

第一步在模板中 使用v-for方法循环出消息列表

<template>

<div id="box">
  <ul id="con1" ref="con1" :class="{anim:animate==true}">
    <li v-for='item in items'>{{item.name}}</li>
  </ul>
</div>
</template>

第二步在<script>标签中放置消息数组和具体的method 方法。

<script>

 export default {
data() {
 return {
   animate:false,
   items:[  //消息列表对应的数组
     {name:"马云"},
     {name:"雷军"},
     {name:"王勤"}
   ]
 }
},
created(){
  setInterval(this.scroll,1000) // 在钩子函数中调用我在method 里面写的scroll()方法,注意此处不要忘记加this,我在这个位置掉了好几次坑,都是因为忘记写this。
},
methods: {
  scroll(){
    let con1 = this.$refs.con1;
    con1.style.marginTop='-30px';
    this.animate=!this.animate;
    var that = this; // 在异步函数中会出现this的偏移问题,此处一定要先保存好this的指向
    setTimeout(function(){
        that.items.push(that.items[0]);
        that.items.shift();
        con1.style.marginTop='0px';
        that.animate=!that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象,此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
    },500)
  }
}
}
</script>

<style>

*{
  margin: 0 ;
  padding: 0;
}
#box{
  width: 300px;
  height: 32px;
  line-height: 30px;
  overflow: hidden;
  padding-left: 30px;
  border: 1px solid black;
  transition: all 0.5s;
}
.anim{
  transition: all 0.5s;
}
#con1 li{
  list-style: none;
  line-height: 30px;
  height: 30px;
}
</style>

以上就是这篇文章的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jQuery 选择器详解
Jan 19 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 #Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 #Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 #Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 #Javascript
浅谈 vue 中的 watcher
Dec 04 #Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 #Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 #Javascript
You might like
php一些错误处理的方法与技巧总结
2013/08/10 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php实现的RSS生成类实例
2015/04/23 PHP
php文件系统处理方法小结
2016/05/23 PHP
php简单压缩css样式示例
2016/09/22 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
PyQt5每天必学之弹出消息框
2018/04/19 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
优秀团员自我评价
2015/03/10 职场文书
教学督导岗位职责
2015/04/10 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis