关于前端:记录vue新闻滚动

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;
    }
  }