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 相关文章推荐
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
AngularJS转换响应内容
Jan 27 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 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 验证图片生成函数
2009/05/21 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python多任务及返回值的处理方法
2019/01/22 Python
Python中dict和set的用法讲解
2019/03/28 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
python自定义函数def的应用详解
2020/06/03 Python
python中PyQuery库用法分享
2021/01/15 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
红旗团支部事迹材料
2014/01/27 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
项目投资合作意向书
2014/07/29 职场文书
新课培训心得体会
2014/09/03 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
离职报告格式
2014/11/04 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
现货白银电话营销话术
2015/05/29 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
logback如何自定义日志存储
2021/08/30 Java/Android
Python几种酷炫的进度条的方式
2022/04/11 Python