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 遮罩层实现(mask)实现代码
Jan 09 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
javascript操作css属性
Dec 30 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
如何获取vue单文件自身源码路径
May 06 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 if 想到的些问题
2008/03/22 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
解析link_mysql的php版
2013/06/30 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP开发注意事项总结
2015/02/04 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python opencv 直方图反向投影的方法
2018/02/24 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
python re模块常见用法例举
2021/03/01 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
大学迎新晚会主持词
2014/03/24 职场文书
初中生期末评语大全
2014/04/24 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL