1.普通滚动
<div class="info"> <transition name="slide" mode="out-in"> <div class="con" v-if="number == 0" key="money"> <div>发射心心得奖金</div> <div class="money"> <img src="../../assets/images/v3/icon_win_money.png" alt=""> <div>{{info.total_money | moneyFormat}}元</div> </div> </div> <div class="con" key="rank"> <div class="rank"> <img src="../../assets/images/v3/icon_win_hot.png" alt=""> <div>排名:{{info.rank_num > 100 ? '100+' : info.rank_num}}</div> </div> <div class="score"> <img src="../../assets/images/v3/icon_win_heart.png" alt="" style="margin-right: 7px;"> <div>心心:{{changelike(info.received_num)}}</div> </div> </div> </transition> </div>
totalDuration: 5000, number: 0, timeOutEvent: null, timeIntevalEvent: null, longlock: false, showMoney:false, moneyQueue:[], popMoney:'' } }, filters:{ moneyFormat(value){ return (value * 1.0 / 100).toFixed(2) } }, methods: { startMove() { clearTimeout(this.scrollTimer); this.scrollTimer = setTimeout(() => { if (this.number === 1) { this.number = 0; } else { this.number += 1; } this.startMove(); }, this.totalDuration); }, mounted(){ this.startMove() }
.info{ 140px; height: 57px; margin-left:18px; margin-top:35px; overflow:hidden; .slide-enter-active, .slide-leave-active { transition: all 0.5s linear; } .slide-leave-to { transform: translateY(-57px); } .slide-enter { transform: translateY(57px); }
2.无缝滚动(不停顿)
http://www.cppcns.com/wangluo/javascript/366410.html(原理+左右滚)
上下滚
<div class="info-inner"> <div class="info"> <div class="con"> <div>发射心心得奖金</div> <div class="money"> <img src="../../assets/images/v3/icon_win_money.png" alt=""> <div>{{info.total_money | moneyFormat}}元</div> </div> </div> <div class="con"> <div class="rank"> <img src="../../assets/images/v3/icon_win_hot.png" alt=""> <div>排名:{{info.rank_num > 100 ? '100+' : info.rank_num}}</div> </div> <div class="score"> <img src="../../assets/images/v3/icon_win_heart.png" alt="" style="margin-right: 7px;"> <div>心心:{{changelike(info.received_num)}}</div> </div> </div> <div class="con"> <div>发射心心得奖金</div> <div class="money"> <img src="../../assets/images/v3/icon_win_money.png" alt=""> <div>{{info.total_money | moneyFormat}}元</div> </div> </div> <div class="con"> <div class="rank"> <img src="../../assets/images/v3/icon_win_hot.png" alt=""> <div>排名:{{info.rank_num > 100 ? '100+' : info.rank_num}}</div> </div> <div class="score"> <img src="../../assets/images/v3/icon_win_heart.png" alt="" style="margin-right: 7px;"> <div>心心:{{changelike(info.received_num)}}</div> </div> </div> </div>
.info-inner{ width: 140px; height: 57px; margin-left:18px; margin-top:35px; overflow:hidden; } .info{ animation-name: seamless-scrolling; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration:10s; animation-fill-mode: forwards; @keyframes seamless-scrolling { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
3.无缝滚动(停顿播放,每隔几秒滚一下)
跑马灯组件(网上的互抄又乱,所以理解原理,自己写了下,可以演变成左右按钮操作滚动、上下滚、数字翻滚等特效)
<template> <div class="sec-alert"> <div class="sec-con" > <div class="list-con" ref="list" :style="{'transform':`translateX(${ti}px)`}"> <div class="notice-line" :key="index" v-for="(tip,index) in tips">{{htmlFilter(tip)}}</div> <div class="notice-line" :key="`${index}_copy`" v-for="(tip,index) in tips">{{htmlFilter(tip)}}</div> </div> </div> </div> </template> <script> import { htmlFilter } from "../lib/index"; let timer export default { name: 'Broadcast', props: { alerts:{ type:Array, default:()=>[] } }, data() { return { ti: 0, tips: [] } }, methods:{ htmlFilter(value){ return htmlFilter(value) }, startAnimate() { if (timer) clearInterval(timer) this.ti = 0 this.tips = this.alerts if(this.alerts.length === 1){ return; } timer = setInterval(() => { this.ti -= 413 this.$refs.list.style.transition = 'transform 4s linear'//时间差值 if(Math.abs(this.ti)>=Math.abs(this.alerts.length*413)){ setTimeout(()=>{ this.ti = 0 this.$refs.list.style.transition = 'none' },4000)//和动画时间差值的吻合 滚到头归位的时候 这样不会卡顿 } }, 5000); } }, mounted() { if (this.alerts && this.alerts.length) { this.startAnimate() } }, created(){ }, watch: { }, destroyed() { if (timer) { clearInterval(timer) timer = null } } } </script> <style lang="postcss" scoped> .sec-alert { width:503px; margin:0 auto; height: 62px; overflow: hidden; background:url('../assets/images/broadcast_bg.png') no-repeat; background-size:100%; .notice-line{ width:100%; height:62px; font-size:24px; font-weight:400; color:rgba(76,76,76,1); line-height:62px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex-shrink:0; } .sec-con{ width:413px; height:62px; margin-left:75px; margin-right:15px; overflow: hidden; } .list-con{ height:100%; display:flex; flex-wrap: nowrap; } } </style>