Vue原生无缝上下滚动组件transition-group使用心得
首先我们先看看效果其次我们开始造数据let nameList = ['电风**啦','你***包','十二****就','高****爸','南城旧****梦','别理我理我****我','诺****曦','悲欢****女','一枫****书','尹雨****沫','呆橘****橘','困****倦',];let prizeList...
·
首先我们先看看效果
其次我们开始造数据
let nameList = [
'电风**啦',
'你***包',
'十二****就',
'高****爸',
'南城旧****梦',
'别理我理我****我',
'诺****曦',
'悲欢****女',
'一枫****书',
'尹雨****沫',
'呆橘****橘',
'困****倦',
];
let prizeList = [
'腾讯超高级会员',
'华为会员',
'爱奇艺会员',
'百度高级会员',
'小米会员',
'苏宁会员',
'苹果高级会员',
'中兴会员',
];
let messageList = [];
for( let i = 0 ; i < 5 ; i++ ){
messageList.push({
name: nameList[Math.floor(Math.random() * nameList.length)],
prizeName: prizeList[Math.floor(Math.random() * prizeList.length)]
})
};
export default messageList;
然后我们看看vue html部分
<template>
<div class="box">
<div class="carousel-messagebox">
<transition-group tag="ul" enter-active-class="animated fadeInUp"
leave-active-class="animated fadeOutUp">
<li v-show="idx == isCurrent" v-for="(item, idx) in messageList" :key="idx" :class="['carousel-message']">
<span class="good">{{item.name}}</span>
<span>开通了</span>
<span class="good">{{item.prizeName}}</span>
</li>
</transition-group>
</div>
</div>
</template>
这里的动画我们是用的animate,然后统一放在js里面 我们看看效果
import animate from 'animate.css';
import messageList from '@/js/prize';
export default {
data () {
return {
messageList: [],
isCurrent:0
}
},
methods:{
autoPlay () {
this.messageList = messageList;
let length = this.messageList.length;
if (this.isCurrent >= length) {
this.isCurrent = 0;
this.autoPlay();
} else {
setTimeout(()=>{
this.isCurrent++;
this.autoPlay();
}, 3000)
}
},
},
mounted(){
this.autoPlay();
}
}
css的话 还是加一下吧
.box{
width: 300px;
height: 200px;
border: 1px dashed pink;
margin: 0 auto;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-messagebox {
width:260px;
height: 30px;
}
.carousel-message {
width:220px;
height: 30px;
line-height:30px;
font-family: PingFangSC-Regular;
font-size: 12px;
background: url('../assets/ic_notice.png') 16px center no-repeat rgba(0,0,0,0.6);
background-size:20px 16px;
border-radius: 30px;
padding-left:30px;
position: absolute;
color:#fff;
display: -webkit-box;
-webkit-box-pack: left;
-webkit-box-align: center;
}
.good {
color:#ffe795;
width: 80px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
display: block;
height: 30px;
line-height:30px;
margin-left: 8px;
}
这种效果还是出现的比较多的,希望能帮助各位小伙伴
更多推荐
已为社区贡献5条内容
所有评论(0)