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小括号“()”的多义性
Dec 03 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 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初学者头痛的十四个问题
2006/07/12 PHP
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
jQuery功能函数详解
2015/02/01 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
浅析Python中的多重继承
2015/04/28 Python
Python读写文件方法总结
2015/06/09 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
大四学生毕业自荐信
2013/11/07 职场文书
写给老师的保证书
2015/05/09 职场文书
单位同意报考证明
2015/06/17 职场文书
cf战队宣传语
2015/07/13 职场文书
教育教学工作反思
2016/02/24 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android