HTML
<div class="scroll-wrap" >
<div
v-for="(item2,index2) in jsonList.rightArr1"
:key="index2"
class="scroll-content"
:style="{top}"
@mouseenter="Stop()"
@mouseleave="Up()"
>
<wrap class="marginT-14 pt-4 pb-4 pl-8 pr-8 cursor" :open="true">
<div class="flex">
<span class="fs-14">{{item2.name}}</span>
<span class="fs-14">{{item2.time}}</span>
</div>
<div class="flex">
<span class="colorH fs-14">{{item2.miaoshu}}</span>
<span class="fs-14">{{item2.type}}</span>
</div>
</wrap>
</div>
</div>
data
activeIndex: 0,
intnum: null
computed
computed: {top () {
return -this.activeIndex * 62 + 'px';
//62 的值是单条滚动的高度 + 间隔下一条的间隔得出(下边距)}
},
mounted
this.ScrollUp()
methods
ScrollUp () {this.intnum = setInterval(()=> {if (this.activeIndex < this.jsonList.rightArr1.length) {this.activeIndex += 1} else {this.activeIndex = 0}
}, 1000)
},
Stop () {clearInterval(this.intnum)
},
Up () {this.ScrollUp()
},
css
.scroll-wrap{
height: 100%;
overflow: hidden;
.scroll-content{
position: relative;
transition: top 0.5s;
}
}