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 = truesetTimeout(() => {this.msg.push(this.msg[0])this.msg.shift()this.animate = false}, 500)},
}

关键css部分

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

效果：

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

vue广告栏上下滚动效果相关推荐

vue 上下滚动的菜单_vue实现广告栏上下滚动效果
vue广告栏上下滚动效果 html部分 {{item.name}}抢得商品{{item.goods}} 已有123人申请 1 2 3 4 5 6 7 8 9 10 11 js部分 data () { ...
vue实现数字滚动效果
vue实现数字滚动效果 npm 下载 vue-count-to https://npmmirror.com/package/vue-count-to
vue做数字滚动效果
vue实现数字滚动效果近期在做项目的时候,产品要求实现数字滚动效果如下: 用jquery实现 html: <div class="develop"> <!--滚 ...
Android自定义View（广告栏上下滚动效果）
需求中涉及到的广告栏变化千变万化,这里,我们综合取材,有了下面的这篇文章. 开始的时候,我们使用的是MarqueeView,继承的ViewFlipper,但是会有一些bug,比如刷新数据时的重叠阴影等 ...
vue实现卡片滚动效果
vue实现卡片滚动左右切换效果 HTML: //最外层盒子 <div class="box_1">//内层盒子<div class="box_2&quo ...
vue商品列表滚动效果_如何处理前端超长列表
点击上方蓝字关注我们背景:系统中有一个添加品牌的搜索框,当搜索类目不做限制的时候,全部的品牌列表会有1W多个,这时候在框架的加持下,操作速度感人.可以在https://codesandbox.io/ ...
Android自定义View精品（LimitScrollerView－仿天猫广告栏上下滚动效果）
版权声明:本文为openXu原创文章[openXu的博客],未经博主允许不得以任何形式转载文章目录 1.分析 2.定义组合控件布局 3.继承最外层控件 4.自定义属性 5.重写onMeasure 6 ...
Vue 实现数字滚动效果
效果就是显示某个数值不是直接显示,而是从0开始滚动,直到为那个数值时停止滚动 1.新建数字滚动组件:test.vue文件 <template><div class="num ...
vue商品列表滚动效果_vue+帧动画实现获奖奖品列表滚动循环展示
实现效果初级方法: 实现原理: 由于列表的总数是变化的,所以不能用css把动画写死,通过定时器移动列表,实现动画效果计算总高度,建一个变量存储移动距离,两者之前比较,当移动距离>=总高度就 ...

vue广告栏上下滚动效果

vue广告栏上下滚动效果

vue广告栏上下滚动效果相关推荐

最新文章

热门文章