Vue ベースの円形スクロールリスト機能を実装する

<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="defaultOption">
        <ul class="item">
            <li v-for="リストデータ内の項目">
                <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
            </li>
        </ul>
    </vue-シームレススクロール>

<style lang="scss" スコープ>
    .シームレスワープ{
        高さ: 229px;
        オーバーフロー: 非表示;
    }
</スタイル>

<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                リストデータ: [{
                   'title': 'シームレススクロールの最初の行 シームレススクロールの最初の行',
                   '日付': '2017-12-16'
                 }, {
                    'title': 'シームレススクロール2行目シームレススクロール2行目',
                    '日付': '2017-12-16'
                 }, {
                     'title': 'シームレススクロール3行目シームレススクロール3行目',
                     '日付': '2017-12-16'
                 }, {
                     'title': 'シームレススクロール4行目シームレススクロール4行目',
                     '日付': '2017-12-16'
                 }, {
                     'title': 'シームレススクロール5行目シームレススクロール5行目',
                     '日付': '2017-12-16'
                 }, {
                     'title': 'シームレススクロール6行目シームレススクロール6行目',
                     '日付': '2017-12-16'
                 }, {
                     'title': 'シームレススクロール7行目シームレススクロール7行目',
                     '日付': '2017-12-16'
                 }, {
                     'title': 'シームレススクロール8行目シームレススクロール8行目',
                     '日付': '2017-12-16'
                 }, {
                     'title': 'シームレススクロール9行目シームレススクロール9行目',
                     '日付': '2017-12-16'
                 }]
                }
            }
       }
</スクリプト>

計算: {
    デフォルトオプション() {
      戻る {
        step: 0.6, // 値が大きいほど、スクロールが速くなります。 hoverStop: true, // マウスホバーストップを有効にするかどうか
        direction: 1, // 0 下 1 上 2 左 3 右 waitTime: 1000 // シングルステップモーション停止時間 (デフォルト 1000ms)
      }
    }
  }