vue实现广告栏上下滚动效果


Posted in Vue.js onNovember 26, 2020

本文实例为大家分享了vue实现广告栏上下滚动效果的具体代码,供大家参考,具体内容如下

html部分

<div class="roll">
 <img src="xxx.jpg" alt />
 <ul :class="{marquee_top:animate}">
  <li v-for="(item, index) in msg" :key="index">
   <span class="txtWrap">
    <span class="txt">{{item.name}}抢得商品{{item.goods}}</span>
    <span class="txt">已有123人申请</span>
   </span>
  </li>
 </ul>
</div>

js部分

data () {
 return {
 msg: [
    {
     name: '张**',
     goods: '牙膏'
    },
    {
     name: '王**',
     goods: '牙刷'
    },
    {
     name: '钟**',
     goods: '肥皂'
    }
   ],
  animate: false,
  setInTime:'' // 定时器
 }
 },
mounted:{
 this.setInTime = setInterval(this.showMarquee, 3000)
},
destroyed () {
  clearInterval(this.setInTime) // 页面销毁时清除定时器
 },
methods:{
 // 滚动栏滚动
  showMarquee () {
   this.animate = true
   setTimeout(() => {
    this.msg.push(this.msg[0])
    this.msg.shift()
    this.animate = false
   }, 500)
  },
}

关键css部分

.marquee_top {
    transition: all 0.5s;
    margin-top: -26px; /* 容器高度 */
 }

效果:

vue实现广告栏上下滚动效果

(图中有个地方直接改变内容的为gif图片首尾相接部分)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
Vue组件生命周期运行原理解析
Nov 25 #Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 #Vue.js
在Vue中使用mockjs代码实例
Nov 25 #Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 #Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 #Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 #Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 #Vue.js
You might like
重置版游戏视频
2020/04/09 魔兽争霸
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
php实现对象克隆的方法
2015/06/20 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
javascript动态加载二
2012/08/22 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
详解Nodejs mongoose
2018/06/10 NodeJs
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Python判断某个用户对某个文件的权限
2016/10/13 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
介绍java中初始化块的使用
2012/09/11 面试题
好的演讲稿开场白
2013/12/30 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
庐山导游词
2015/02/03 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js