自動でスクロールされるリストを「vue-seamless-scroll」で実装する

vue-seamless-scrollとは

vue-seamless-scrollは、自動でスクロールされるリストをシンプル実装できるVue.js製ライブラリです。
縦の上下スクロールだけでなく、横のスクロールも行うことが可能です。

 

 

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install vue-seamless-scroll --save

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-seamless-scroll.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/chenxuan0000/vue-seamless-scroll

 

導入手順

1. ライブラリの取り込み

（1）webpack等の場合 ※モジュール版は未検証です。

import vueSeamless from 'vue-seamless-scroll'

（2）WEBページの場合

const vueSeamless  = window.vueSeamlessScroll;

2.メソッドを設定

let app = new Vue({
  el: '#app',
  components: {
    vueSeamless
  },
  data: {
    listData: [
      {
        'title': 'タイトル1',
        'date': '2017-12-16'
      }, {
        'title': 'タイトル2',
        'date': '2017-12-16'
      }, {
          'title': 'タイトル3',
          'date': '2017-12-16'
      }, {
          'title': 'タイトル4',
          'date': '2017-12-16'
      }, {
          'title': 'タイトル5',
          'date': '2017-12-16'
      }, {
          'title': 'タイトル6',
          'date': '2017-12-16'
      }, {
          'title': 'タイトル7',
          'date': '2017-12-16'
      }, {
          'title': 'タイトル8',
          'date': '2017-12-16'
      }, {
          'title': 'タイトル9',
          'date': '2017-12-16'
      }
    ]
  }
});

3. テンプレートを準備

<vue-seamless-scroll :data="listData" class="seamless-warp">
  <ul class="item">
     <li v-for="item in listData"> {{item.date}} - {{item.title}}</li>
  </ul>
</vue-seamless-scroll>

サンプル

>>専用ページで確認する

 

さいごに

自動でスクロールされるリストをシンプル実装できるVue.js製ライブラリでした。

Githubにアクセスすると謎のマスコットにお出迎えされます。（中国で流行ってるのマスコット？

今日はこの辺でー