vue新闻自下往上滚动效果

 

 如图所示自下往上滚动鼠标放上暂停滚动 鼠标移出继续滚动

一、html：

<div class="newsList" @mouseover="mouseOver" @mouseout="mouseOut">
        <ul id="con1" ref="con1" :class="{ anim: animate == true }">
          <li v-for="(item, key) in items" :key="key" class="newsItem">
            <img src="../../assets/img/icon.png" alt="" style="margin-top:5px;width:20px;height:20px">
            <span>{{ item.title }}</span>
            <span @click="getCode(item.qrCode)">查看></span>
          </li>
        </ul>
        <div class="showCode" v-if="codeShow">
         <p style="text-align:right;padding-right:10px;cursor:pointer" @click="codeShow=false">x</p>
          <img :src="code" alt="">
          <p>更多内容可扫码查看</p>
        </div>
      </div>

二.css动画

.newsList {
  width: 90%;
  margin: 10px auto;
  height: 90px;
  overflow: hidden;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 17px;
  color: #ffffff;
   /* background-color: red; */
}
.anim {
  transition: all 1s;
  margin-top: -30px;
}
#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
}

三、js代码

mounted() {
    this.timer=setInterval(this.scroll, 2000);
    this.$api.newsList({
      limit:12,
      page:1
    }).then(res=>{
      this.items=res.data.records
    })
  },
  methods: {
    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
        this.items.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 1000);
    },
    getCode(qrCode){
      this.code=qrCode
      this.codeShow=true
    },
    mouseOver(){
      console.log('鼠标悬停')
      // this.animate = false;
      clearInterval(this.timer)
    },
    mouseOut(){
      // this.animate = true;
      this.timer=setInterval(this.scroll, 2000);
    }
  },