vue-seamless-scroll 外掛

1.下載外掛

npm install vue-seamless-scroll --save

2. 在main.js裡面引入使用

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3.頁面使用（根據需求 設定相對應的屬性) 樣式加上 不然的話會有一點bug 自己測試

<template>
    <vue-seamless-scroll :data="listData" :class-option="optionSingleHeight" class="seamless-warp">
        <ul class="item">
            <li v-for="item in listData">
                <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
            </li>
        </ul>
    </vue-seamless-scroll>
</template>
<style scoped>
*{
  margin:0;padding:0;
}
    .seamless-warp {
        height: 40px;
        overflow: hidden;
        line-height:40px;
        background: red
    }
</style>
<script>
    export default {
        data () {
            return {
                listData: [{
                   'title': '無縫滾動第一行無縫滾動第一行',
                   'date': '2017-12-16'
                 }, {
                    'title': '無縫滾動第二行無縫滾動第二行',
                    'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動第三行無縫滾動第三行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動第四行無縫滾動第四行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動第五行無縫滾動第五行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動第六行無縫滾動第六行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動第七行無縫滾動第七行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動第八行無縫滾動第八行',
                     'date': '2017-12-16'
                 }, {
                     'title': '無縫滾動第九行無縫滾動第九行',
                     'date': '2017-12-16'
                 }]
                }
            },
        computed: {
              optionSingleHeight () {
                  return {
                          //                       （什麼都不設定預設的）
                          //  singleHeight: 40     （帶停頓的）
                          // waitTime:2500         （停頓時間）
                          // direction: 0          （從上往下的）
                          // direction:2           （左右的）
                          //step:1                 （調整速度的）0
                          // hoverStop:false        (滑鼠停留停止 離開繼續執行（反之則停止）)
                         }
                }
             }
       }
</script>