VUEタイトルスクロールを上下にシームレスにカルーセル

参考サイト：https://www.jianshu.com/p/b6813193ca0d

<テンプレート> 
  の<divクラス= "ラップ"：スタイル= "{高さ：高さ+ 'ピクセル'}"> 
    < divの
      クラス = "ボックス" 
      ：スタイル = "{トップ： ' - ' +高さ+ 'ピクセル'、高さ：（高さ* actualMap.length）+ 'PX'}」
    > 
      < DIV 
        クラス = "項目" 
        V - のため = "actualMapで（項目、インデックス）" 
        ：キー = "インデックス" 
        @click = "showPreview（アイテム）" 
        ：スタイル = "{ '高'：高さ+ 'PX'、 '行の高さ'：高さ+ 'ピクセル'}" 
      >
        < のdiv 
          クラス = "inner_content" 
          ：スタイル= "{ '行の高さ'：高さ/ 2 + 'ピクセル'}" 
        > {{item.rollTitle == ""？item.title：item.rollTitle}} </ div> 
        < divの
          クラス = "amount_title" 
          ：スタイル = "{ '行の高さ'：高さ/ 2 + 'ピクセル'}" 
        > {{item.pubTm | formatDate2}}・浏览次数{{item.viewCount}} </ DIV> 
      </ DIV> 
    </ DIV> 
  </ DIV> 
</テンプレート> 
 
<スクリプト> 
輸出デフォルト{ 
  名： "selfCarousel"、// 自定义标题栏走马灯
  小道具：{ 
    高さ：{ 
      デフォルト：40 、
      ：[]、
      型：Array 
    } 
  }、
  データ（）{ 
    リターン{ 
      ボックス：ヌル、
      タイマー：不定、
      moveTimer：不定、
      インデックス： 1 
    }。
  }、
  計算：{ 
    actualMap：関数は、（）{ 
      TMPはせ = この.contentArrを
        ？JSON.parse（JSON.stringify（この.contentArr））
        ：[]。
      もし（この .contentArr.length> 0 ）{ 
        Tmp.unshift（この .contentArr [ この.contentArr.length - 1 ]）。
        Tmp.push（この .contentArr [0 ]）。
      } 
      戻りのTmpと、
    } 
  } 
  ）（{搭載
    本 ■は= document.getElementsByClassName（ "ボックス"）[0 ];
    この.inintTimer（）; 
    _thisは聞かせて = この; 
    $（ ".wrap" ）.hover（
       関数（E）{ 
        てclearInterval（_this.timer）; 
        _this.timer = 不定; 
      }、
      関数（）{ 
        _this.inintTimer（）; 
      } 
    ）;
  }、
  メソッド：{ 
    showPreview（行）{ 
      この $ EMIT（ "showPreview" 、行）。
    }、
    moveWidthIndex（）{ 
      VARの L = この .INDEX * - この .height - この.box.offsetTop。
      VaRの数= 0 ; 
      clearInterval（この.moveTimer）。
      自己を聞かせて = この;
      この .moveTimer =たsetInterval（関数（）{ 
        カウント ++ ; 
        self.box.style.top = 
          self.box.offsetTop+ L /（self.contentArr.length * 2）+ "PX" 。
        もし（カウント> = self.contentArr.length * 2 ）{ 
          てclearInterval（self.moveTimer）。
          self.box.style.top = self.index * - self.height + "PX" 。
        } 
      }、 20 ）; 
    }、
    NEXTSTEP（）{ 
      この .INDEX ++ 。
      もし（この .INDEX == この.actualMap.length）{
         この .INDEX = 2 。
        この .box.style.top = " - " + この .height + "PX" 。
      } 
      この.moveWidthIndex（）。
    }、
    inintTimerは（）{ 
      自己せ = この;
      この .timer =たsetInterval（関数（）{ 
        self.nextStep（）; 
      }、 2000 ）。
    } 
  } 
}。
</ SCRIPT> 
 
<スタイルのlang = "少ない"スコープ> 
.wrap { 
  幅： 100％ 。
  位置：相対; 
  オーバーフロー：隠されました; 
} 
■は{ 
  幅： 100％ 。
  位置：絶対; 
} 
.item { 
  幅： 100％ 。
}
.inner_content { 
  幅： 100％ 。
  オーバーフロー：隠されました; 
  テキスト - オーバーフロー：省略記号。
  白 - スペース：NOWRAP。
  フォント - サイズ：16pxに; 
  色：＃ 333333 ; 
} 
.amount_title { 
  フォント - サイズ：14px; 
  色：＃ 999999 ; 
}
 </スタイル>