基于vue實現(xiàn)新聞自下往上滾動效果(示例代碼)

更新時間：2022年04月02日 10:38:12 作者：櫻桃小王子yummy

這篇文章主要介紹了vue新聞自下往上滾動效果,當(dāng)鼠標鼠標放上暫停滾動，鼠標移出繼續(xù)滾動，本文結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下

如圖所示自下往上滾動鼠標放上暫停滾動鼠標移出繼續(xù)滾動

一、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>更多內(nèi)容可掃碼查看</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過渡動畫，所以這里需要設(shè)置true
      setTimeout(() => {
        //  這里直接使用了es6的箭頭函數(shù)，省去了處理this指向偏移問題，代碼也比之前簡化了很多
        this.items.push(this.items[0]); // 將數(shù)組的第一個元素添加到數(shù)組的
        this.items.shift(); //刪除數(shù)組的第一個元素
        this.animate = false; // margin-top 為0 的時候取消過渡動畫，實現(xiàn)無縫滾動
      }, 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);
    }
  },

到此這篇關(guān)于vue新聞自下往上滾動效果的文章就介紹到這了,更多相關(guān)vue新聞滾動效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: