Vue.jsでボトムアップ形式のmarqueeを実装する「vue-list-marquee」

vue-list-marqueeとは

vue-list-marqueeは、ボトムアップ形式のmarqueeを実装できるコンポーネントライブラリです。

特徴として、リストのコンテンツがリストの高さを超えると自動的にスクロールを開始します。
それ以外は、スクロールしません。

【動画サイズ：546KB】

環境

この記事は、以下の管理人の検証環境をもとにして記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, CDNのどれか一つを使用します。

npm install vue-list-marquee --save

<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ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の２通りのケースで呼び出します。

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を実装できるコンポーネントライブラリでした。

今日はこの辺でー