快捷導(dǎo)航

vue實(shí)現(xiàn)消息的無(wú)縫滾動(dòng)效果的示例代碼

更新時(shí)間：2017年12月05日 08:35:54 作者：candy

本篇文章主要介紹了vue實(shí)現(xiàn)消息的無(wú)縫滾動(dòng)效果的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

朋友的項(xiàng)目里要實(shí)現(xiàn)一個(gè)消息無(wú)縫滾動(dòng)的效果，中途遇到了一點(diǎn)小bug,每組消息滾動(dòng)完再次循環(huán)時(shí)會(huì)出現(xiàn)停留兩倍的時(shí)間間隔問(wèn)題，我研究了一天終于解決了這個(gè)1S的小問(wèn)題

項(xiàng)目環(huán)境vue-cli ，請(qǐng)自行配置好相應(yīng)的，環(huán)境及路由，這里主要介紹實(shí)現(xiàn)的方法

第一步在模板中使用v-for方法循環(huán)出消息列表

<template>

<div id="box">
  <ul id="con1" ref="con1" :class="{anim:animate==true}">
    <li v-for='item in items'>{{item.name}}</li>
  </ul>
</div>
</template>

第二步在<script>標(biāo)簽中放置消息數(shù)組和具體的method 方法。

<script>

 export default {
data() {
 return {
   animate:false,
   items:[  //消息列表對(duì)應(yīng)的數(shù)組
     {name:"馬云"},
     {name:"雷軍"},
     {name:"王勤"}
   ]
 }
},
created(){
  setInterval(this.scroll,1000) // 在鉤子函數(shù)中調(diào)用我在method 里面寫(xiě)的scroll()方法，注意此處不要忘記加this,我在這個(gè)位置掉了好幾次坑，都是因?yàn)橥泴?xiě)this。
},
methods: {
  scroll(){
    let con1 = this.$refs.con1;
    con1.style.marginTop='-30px';
    this.animate=!this.animate;
    var that = this; // 在異步函數(shù)中會(huì)出現(xiàn)this的偏移問(wèn)題，此處一定要先保存好this的指向
    setTimeout(function(){
        that.items.push(that.items[0]);
        that.items.shift();
        con1.style.marginTop='0px';
        that.animate=!that.animate;  // 這個(gè)地方如果不把a(bǔ)nimate 取反會(huì)出現(xiàn)消息回滾的現(xiàn)象，此時(shí)把ul 元素的過(guò)渡屬性取消掉就可以完美實(shí)現(xiàn)無(wú)縫滾動(dòng)的效果了
    },500)
  }
}
}
</script>

<style>

*{
  margin: 0 ;
  padding: 0;
}
#box{
  width: 300px;
  height: 32px;
  line-height: 30px;
  overflow: hidden;
  padding-left: 30px;
  border: 1px solid black;
  transition: all 0.5s;
}
.anim{
  transition: all 0.5s;
}
#con1 li{
  list-style: none;
  line-height: 30px;
  height: 30px;
}
</style>

以上就是這篇文章的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue+ ArcGIS JavaScript APi詳解
這篇文章主要介紹了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差異較大，本文從環(huán)境搭建開(kāi)始到測(cè)試運(yùn)行給大家講解的非常詳細(xì)，需要的朋友可以參考下
2022-11-11
vue-drawer-layout實(shí)現(xiàn)手勢(shì)滑出菜單欄
這篇文章主要為大家詳細(xì)介紹了vue-drawer-layout實(shí)現(xiàn)手勢(shì)滑出菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
Vue中ElementUI分頁(yè)組件Pagination的使用方法
這篇文章主要為大家詳細(xì)介紹了Vue中ElementUI分頁(yè)組件Pagination的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
vue鼠標(biāo)hover(懸停)改變background-color移入變色問(wèn)題
這篇文章主要介紹了vue鼠標(biāo)hover(懸停)改變background-color移入變色問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue項(xiàng)目中axios配置方式(代理配置)
這篇文章主要介紹了vue項(xiàng)目中axios配置方式(代理配置),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
開(kāi)發(fā)Vue樹(shù)形組件的示例代碼
本篇文章主要介紹了開(kāi)發(fā)Vue樹(shù)形組件的示例代碼，它展現(xiàn)了組件的遞歸使用。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
在vue3項(xiàng)目中使用新版高德地圖的完整步驟
項(xiàng)目需求需要引入地圖,對(duì)于目前最新的Vue3.0,無(wú)論是百度/高德/騰訊地圖目前還沒(méi)有適配,只有Vue?2.x版本的:?目前只有谷歌地圖的Vue3.0適配,下面這篇文章主要給大家介紹了關(guān)于如何在vue3項(xiàng)目中使用新版高德地圖的完整步驟,需要的朋友可以參考下
2023-02-02
詳解Element-ui NavMenu子菜單使用遞歸生成時(shí)使用報(bào)錯(cuò)
這篇文章主要介紹了詳解Element-ui NavMenu子菜單使用遞歸生成時(shí)使用報(bào)錯(cuò)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vue自定義指令實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue自定義指令實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js自定義指令相關(guān)定義、注冊(cè)、使用方法及操作注意事項(xiàng),需要的朋友可以參考下
2019-02-02
vue組件中的樣式屬性scoped實(shí)例詳解
vue組件中的style標(biāo)簽標(biāo)有scoped屬性時(shí)表明style里的css樣式只適用于當(dāng)前組件元素。接下來(lái)通過(guò)本文給大家分享vue組件中的樣式屬性scoped實(shí)例詳解，感興趣的朋友跟隨小編一起看看吧
2018-10-10