1<template>
<div style="padding: 40px 0 0 40px;"
>
<transition-group
:appear="true"
name="flip-list"
tag="ul"
:css="false"
class="flip-list"
@mouseenter.native="mouseEnter"
@mouseleave.native="bannerText"
>
<li
v-for="(item, index) in listData"
:key="item.id"
:class="{active: index === 1}">
<span>{{item.title }}{{ item.date}}</span>
</li>
</transition-group>
</div>
</template>
<script>
export default {
name: 'textBanner',
data () {
return {
listData: [{
title: '无缝滚动第一行',
date: '2017-12-16',
id: '001'
}, {
title: '无缝滚动第二行 ',
date: '2017-12-16',
id: '002'
}, {
title: '无缝滚动第三行 ',
date: '2017-12-16',
id: '003'
}, {
title: '无缝滚动第四行 ',
date: '2017-12-16',
id: '004'
}, {
title: '无缝滚动第五行 ',
date: '2017-12-16',
id: '005'
}, {
title: '无缝滚动第六行 ',
date: '2017-12-16',
id: '006'
}, {
title: '无缝滚动第七行 ',
date: '2017-12-16',
id: '007'
}, {
title: '无缝滚动第八行 ',
date: '2017-12-16',
id: '008'
}, {
title: '无缝滚动第九行 ',
date: '2017-12-16',
id: '009'
}],
timer: null
};
},
computed: {
},
methods: {
toggleList () {
const lastItem = this.listData.splice(0, 1);
this.$nextTick(() => {
this.listData.push(...lastItem);
});
},
mouseEnter () {
if (this.timer) {
clearInterval(this.timer);
}
},
bannerText () {
if (this.timer) {
clearInterval(this.timer);
}
this.timer = setInterval(() => {
this.toggleList();
}, 3000);
}
},
mounted () {
this.bannerText();
},
beforeDestroy () {
},
watch: {
// handler immediate deep
},
components: {
}
}
</script>
<style scoped lang="less">
.seamless-warp {
height: 89px;
width: 300px;
overflow: hidden;
}
.item {
li {
height: 30px;
line-height: 30px;
border-bottom: 1px solid #ddd;
text-align: center;
font-size: 12px;
color: #999;
}
li.curr {
font-size: 16px;
color: #000;
}
}
.flip-list {
list-style: none;
height: 89px;
width: 300px;
overflow: hidden;
li {
height: 30px;
line-height: 30px;
border-bottom: 1px solid #ddd;
text-align: center;
cursor: pointer;
span {
font-size: 12px;
color: #999;
transition: all 500ms;
}
}
li.active {
span {
font-size: 16px;
color: #f8ae00;
}
}
}
.flip-list-move {
transition: transform 500ms;
}
</style>
transition-group无缝滚动组件
最新推荐文章于 2024-03-26 10:56:08 发布