vue广告栏上下滚动效果

vue广告栏上下滚动效果

html部分

 <div class="roll">
  <img src="xxx.jpg" alt />
  <ul :class="{marquee_top:animate}">
    <li v-for="(item, index) in msg" :key="index">
      <span class="txtWrap">
        <span class="txt">{{item.name}}抢得商品{{item.goods}}</span>
        <span class="txt">已有123人申请</span>
      </span>
    </li>
  </ul>
</div>

js部分

data () {
  return {
	 msg: [
	      {
	        name: '张**',
	        goods: '牙膏'
	      },
	      {
	        name: '王**',
	        goods: '牙刷'
	      },
	      {
	        name: '钟**',
	        goods: '肥皂'
	      }
	    ],
	  animate: false,
	  setInTime:'' // 定时器
  }
 },
mounted:{
	this.setInTime = setInterval(this.showMarquee, 3000)
},
destroyed () {
    clearInterval(this.setInTime) // 页面销毁时清除定时器
 },
methods:{
	// 滚动栏滚动
    showMarquee () {
      this.animate = true
      setTimeout(() => {
        this.msg.push(this.msg[0])
        this.msg.shift()
        this.animate = false
      }, 500)
    },
}

关键css部分

 .marquee_top {
        transition: all 0.5s;
        margin-top: -26px; /* 容器高度 */
 }

效果：

（图中有个地方直接改变内容的为gif图片首尾相接部分）