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的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 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/06/24 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
如何在PHP中使用数组
2020/06/09 PHP
拖拉表格的JS函数
2008/11/20 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python抓取网页中的图片示例
2014/02/28 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
旅游管理实习自我鉴定
2013/09/29 职场文书
求职简历推荐信范文
2013/12/02 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
咖啡店创业计划书
2014/08/15 职场文书
给老婆的道歉信
2015/01/20 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python