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 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
微信小程序实现打卡签到页面
Sep 21 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
实例解析php的数据类型
2018/10/24 PHP
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
vue中的router-view组件的使用教程
2018/10/23 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
python设置表格边框的具体方法
2020/07/17 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
师范生自荐信
2013/10/27 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
社区好人好事材料
2014/12/26 职场文书
紧急通知
2015/04/17 职场文书