基于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);
    }
  },

到此这篇关于vue新闻自下往上滚动效果的文章就介绍到这了,更多相关vue新闻滚动效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！