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 相关文章推荐
没有document.getElementByName方法
Aug 19 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
js实现一键复制功能
Mar 16 Javascript
JS排序之选择排序详解
Apr 08 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
OpenLayers3实现地图显示功能
Sep 25 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中数组的分组排序实例
2014/06/01 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python关键字and和or用法实例
2015/05/28 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python中正则表达式的用法总结
2019/02/22 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
工作决心书
2014/03/11 职场文书
中班开学寄语
2014/04/04 职场文书
会计专业自荐信
2014/06/03 职场文书
药品开票员岗位职责
2015/04/15 职场文书
中学总务处工作总结
2015/08/12 职场文书
《穷人》教学反思
2016/02/19 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
python 单机五子棋对战游戏
2022/04/28 Python
mysql函数之截取字符串的实现
2022/08/14 MySQL