目次
vue-list-marqueeとは
vue-list-marqueeは、ボトムアップ形式のmarqueeを実装できるコンポーネントライブラリです。
特徴として、リストのコンテンツがリストの高さを超えると自動的にスクロールを開始します。
それ以外は、スクロールしません。
【動画サイズ:546KB】
環境
この記事は、以下の管理人の検証環境をもとにして記事にしています。
vue.js | 2.6.10 |
vue-list-marquee | 1.0.48 |
ライブラリの取得
ライブラリを取得するには、npm, CDNのどれか一つを使用します。
npm
npm install vue-list-marquee --save
CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-list-marquee.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-list-marquee.css">
gitリポジトリは以下から取得できます。
導入手順
管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、ボトムアップ形式のmarqueeを実装します。
step
1ライブラリの呼び出し
まずライブラリを呼び出す為に、以下の2通りのケースで呼び出します。
ES6等で実装する場合
import 'vue-list-marquee/dist/vue-list-marquee.css' import VueListMarquee from 'vue-list-marquee'
UMDで実装する場合
const VueListMarquee = window['VueListMarquee'].default;
step
2メソッドを設定
Vue.use
に上記で取得した VueListMarqueeを設定します。
Vue.use(VueListMarquee); new Vue({ el: '#app', data: { myLists: { list1: { data: [], marqueeOption: { moveTime: 500, needRestTime: true, restTime: 500, needHover: true, delayTime: 0 } }, list2: { data: [], marqueeOption: { moveTime: 1000, needRestTime: false, restTime: 1000, needHover: true, delayTime: 1000 } }, list3: { data: [], marqueeOption: { moveTime: 1200, needRestTime: true, restTime: 600, needHover: true, delayTime: 1000, timingFunc: 'ease-in-out' } } }, listData1: [ {content: 'todo1'}, {content: 'todo2'}, {content: 'todo3'}, {content: 'todo4'}, {content: 'todo5'}, {content: 'todo6'}, {content: 'todo7'}, {content: 'todo8'}, {content: 'todo9'}, {content: 'todo10'}, ], listData3: [ {content: 'todo1todo1todo1todo1todo1todo1todo1todo1todo1todo1'}, {content: 'todo1todo1todo1todo1todo1todo1todo1todo1todo1todo1'}, {content: 'todo1todo1todo1todo1todo1todo1todo1todo1todo1todo1'}, {content: 'todo1todo1todo1todo1todo1todo1todo1todo1todo1todo1'}, {content: 'todo1todo1todo1todo1todo1todo1todo1todo1todo1todo1'}, {content: 'todo1todo1todo1todo1todo1todo1todo1todo1todo1todo1'}, {content: 'todo1todo1todo1todo1todo1todo1todo1todo1todo1todo1'}, {content: 'todo1todo1todo1todo1todo1todo1todo1todo1todo1todo1'}, {content: 'todo1todo1todo1todo1todo1todo1todo1todo1todo1todo1'}, ], dataRefreshTimer: null, dataRefreshFreq: 24000, clockTimer: null, clockPercent: 0, clockFreq: 500 }, methods: { getListData() { this.clockPercent = 0; clearInterval(this.clockTimer); this.clockTimer = setInterval(() => { this.clockPercent += (100 - this.clockPercent) * 0.12; }, this.clockFreq); this.myLists.list1.data = this.listData1.slice(0, +(9 + Math.random() * 6).toFixed(0)); this.myLists.list2.data = this.listData1.slice(0, +(9 + Math.random() * 6).toFixed(0)); this.myLists.list3.data = this.listData3.slice(0, +(9 + Math.random() * 6).toFixed(0)); } }, mounted() { this.$nextTick(() => { this.getListData(); this.dataRefreshTimer = setInterval(() => { this.getListData(); }, this.dataRefreshFreq); }); }, beforeDestroy() { clearInterval(this.dataRefreshTimer); clearInterval(this.clockTimer); } });
step
3テンプレートを準備
<vue-list-marquee>
コンポーネントを設置します。
list-data
プロパティには、スクロールするリストデータを設定します。
option
プロパティには、スクロールの速さなどを設定します。
サンプルはケバブケースで記載しています。
<div id="app"> <div class="demo"> <div class='my-list' v-for="(value, key) in myLists" :key="key"> <div class="process-bar" :style="{width: clockPercent + '%'}"></div> <vue-list-marquee class='my-marquee' :list-data='value.data' :option='value.marqueeOption'> <template slot-scope="{ item, index }"> <div class="item"> <div class='col1' :class="{'first': index === 0}">-{{index+1}}-</div> <div class='col2' :class="key === 'list3' ? 'break' : 'ellipsis'">{{item.content}}</div> </div> </template> </vue-list-marquee> </div> </div> </div>
サンプル
今回のソースを実際に触って確認できるようにデモを用意しました。
See the Pen Vue.jsでボトムアップ形式のmarqueeを実装する「vue-list-marquee」 by カバの樹 (@kabanoki) on CodePen.dark
さいごに
ボトムアップ形式のmarqueeを実装できるコンポーネントライブラリでした。
今日はこの辺でー