vue 做文字滚动

VIP文章梁小茹

已于 2023-03-10 14:23:43 修改

阅读量1.7k

点赞数

分类专栏： vue 文章标签： vue.js css javascript

于 2022-11-03 14:24:04 首次发布

本文链接：https://blog.csdn.net/weixin_46653486/article/details/127669410

版权

需求是每过几秒跳到下一个
代码：

<div class="caseRB" :class="{'animate-up': animateUp}">
    <div class="case-item" v-for="(item,index) in caseList" @mouseover="infoOver(item)"                                        @mouseleave="infoLeave" @click="toCaseDetails(item.id)" :key="index">
       <div class="dian"></div>
        <div class="case-info">{
  { item.title }}</div>
      </div>
</div>


data () {
	return {
	      timer : null,
	     animateUp: false,
	}
}
mounted() {
    this.timer = setInterval(this.scrollAnimate, 1500)
  },

methods: {
	//  动画
	scrollAnimate() {
	    this.animateUp = true
	    setTimeout(() => {
	      this.caseList.push(this.caseList[0])
	      this.caseList.shift()
	      this.animateUp = false
	    }, 500)
	  },
	  //鼠标移入事件
	  infoOv