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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
Vue h函数的使用详解
Feb 18 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python中dict使用方法详解
2019/07/17 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
python 进程池pool使用详解
2020/10/15 Python
英国自行车商店:AW Cycles
2021/02/24 全球购物
青年文明号服务承诺
2014/03/31 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
个人作风建设总结
2014/10/23 职场文书
人事专员岗位职责
2015/02/03 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python