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 相关文章推荐
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
js控制div弹出层实现方法
May 11 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
理解javascript中的严格模式
Feb 01 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
Vue 自定义指令功能完整实例
Sep 17 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关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
YII框架常用技巧总结
2019/04/27 PHP
探讨js中的双感叹号判断
2013/11/11 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python3 拼接字符串的7种方法
2018/09/12 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python后端接收前端回传的文件方法
2019/01/02 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
python语言是免费还是收费的?
2020/06/15 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
大学学习计划书范文
2014/05/02 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书