组件可以直接复制展示
<template>
<div class="fy-wrap">
<div class="scroll-body"
ref="scrollBody"
:style="scrollBodyStyle"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
@transitionend="onTransitionend"
>
<div class="origin">
<div class="item"
v-for="item in data"
:key="item.id"
ref="item"
>
<div class="content text-ellipsis" :title="item.name">
{{ item.name}}
</div>
</div>
</div>
<div class="copy">
<div class="item"
v-for="item in data"
:key="item.id"
>
<div class="content text-ellipsis" :title="item.name">
{{ item.name}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
timer:null,
scrollBodyStyle:{},
translateY:0,
data:[{
id:1,
name:'测试1'
},{
id:2,
name:'测试2'
},{
id:3,
name:'测试3'
},{
id:4,
name:'测试4'
},{
id:5,
name:'测试5'
}]
};
},
props: {
},
computed: {
},
created() {
},
mounted() {
this.loop();
},
beforeDestroy() {
clearTimeout(this.timer);
},
watch: {
},
methods: {
onMouseEnter(){
clearTimeout(this.timer)
},
onMouseLeave(){
this.loop();
},
onTransitionend(){
let child = this.$refs.item[0];
let {height:parentHeight} = this.$refs.scrollBody.getBoundingClientRect()
if(child){
if((parentHeight / (this.translateY )) <= 2){
this.scrollBodyStyle={
transform:`translateY(0px)`
}
this.translateY = 0;
}
}
},
loop(){
if(this.data.length <=1){
return;
}
this.timer = setTimeout(()=>{
let child = this.$refs.item[0];
if(child){
let { height } = child.getBoundingClientRect();
this.translateY += height;
this.scrollBodyStyle = {
transform:`translateY(-${this.translateY}px)`,
transition: 'all .3s'
}
}
this.loop();
},3000)
}
},
components: {
},
};
</script>
<style lang="scss" scoped>
.fy-wrap{
max-height: 50px;
overflow: hidden;
.scroll-body{
}
.item{
@include flex-row;
background-color: rgba(12, 25, 28, 0.7);
padding: 10px 40px;
cursor: pointer;
height: 50px;
.content{
color: #999;
max-width: 200px;
font-size: 14px;
}
}
}
</style>
|