vue实现消息的无缝滚动效果的示例代码
时间:2019-04-11
本文章向大家介绍vue实现消息的无缝滚动效果的示例代码,主要包括vue实现消息的无缝滚动效果的示例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
朋友的项目里要实现一个消息无缝滚动的效果,中途遇到了一点小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>
以上就是这篇文章的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Spring Cloud中如何优雅的使用Feign调用接口
- Spring Cloud Eureka 集群高可用
- Spring Cloud Eureka 增加权限认证
- Spring Cloud Eureka 初探
- 房价网是怎么使用分布式作业框架elastic-job
- Spring Cloud Sleuth Zipkin 展示追踪数据
- Spring cloud Zuul Filter 使用小经验
- Spring Cloud Eureka REST 接口
- Spring Cloud Eureka 控制台快速查看Swagger API文档
- Spring Cloud Feign 启动UnsatisfiedDependencyException
- Spring Cloud Zuul结合Smconf配置中心动态进行IP黑名单限制
- 高性能NIO框架Netty入门篇
- Spring Boot Web 静态文件缓存处理
- hbuilder 开发APP填坑经验
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PB级大规模Elasticsearch集群运维与调优实践
- 长假慢学,用TensorFlow做了个AI游戏
- 微服务平台之API授权
- 一些让人恶心的代码片段
- 一个依赖搞定 Spring Boot 反爬虫,防止接口盗刷!
- 还在用Swagger(丝袜哥)生成接口文档?我推荐你试试它...
- 技术分享 | 企业版监控工具 MEM 初探
- Java自动化测试(TestNg 10)
- LeetCode109:有序列表转二叉搜索树
- docker和docker-compose
- IDA-完整解析sig
- 干货 | 携程度假无线前端架构演进之路
- Python加速运行技巧
- React 中请求远程数据的四种方法
- BTC-编译0.94版本