vue文字無縫滾動插件vue-seamless-scroll

（1）安裝執行命令

npm install vue-seamless-scroll --save

（2）在main.js文件裏面引入使用：

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

（3） 實例

<template>
    <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
        <ul class="item">
            <li v-for="item in listData">
                <span class="title" v-text="item.title"></span>
            </li>
        </ul>
    </vue-seamless-scroll>
</template>
<style lang="scss" scoped>
    .seamless-warp {
        height: 229px;
        overflow: hidden;
    }
</style>
<script>
    export default {
        data () {
            return {
                listData: [{
                   'title': '無縫滾動第一行無縫滾動第一行',
                 }, {
                    'title': '無縫滾動第二行無縫滾動第二行',
                 }, {
                     'title': '無縫滾動第三行無縫滾動第三行',
                 }, {
                     'title': '無縫滾動第四行無縫滾動第四行',
                 }, {
                     'title': '無縫滾動第五行無縫滾動第五行',
                 }]
                }
            },
            computed: {
                optionHover () {
                    return {
                            hoverStop: false //鼠標懸停關閉

                            singleWidth: 0, // 單行停頓的寬度(默認值0是無縫不停止的滾動)  

                            singleHeight:26//單行停頓間距(不需要停頓不設置)

                            waitTime: 2500//單行停頓時間(不需要停頓不設置)

                            step: 0.5//向上滾動不停頓

                             limitMoveNum: 2, // 開始無縫滾動的數據量 

                             direction: 0, // 0向下 1向上 2向左 3向右

                             openWatch: true, // 開啓數據實時監控刷新dom                             

                        }
                }
             }
       }
</script>

（4）文檔鏈接

         demo鏈接