vue插件实现循环滚动列表——vue-seamless-scroll

1、 安装插件vue-seamless-scroll

npm install vue-seamless-scroll --save

2、在main.js中引入插件

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

3、在vue组件中使用vue-seamless-scroll

<template>
    <div id="about">
    	<!--使用vue-seamless-scroll，:data绑定需要循环显示的列表数据-->
        <vue-seamless-scroll :data="lists" class="seamless-warp">
            <ul class="item">
                <li v-for="item in lists">{{item.content}}</li>
            </ul>
        </vue-seamless-scroll>
    </div>

</template>
<script>
    export default {
        data () {
            return {
                lists: [{
                    'content': '山有木兮木有枝，心悦君兮君不知。---佚名《越人歌》'
                }, {
                    'content': '人生若只如初见，何事秋风悲画扇。---纳兰性德《木兰词·拟古决绝词柬友》'
                }, {
                    'content': '十年生死两茫茫，不思量，自难忘。---苏轼《江城子·乙卯正月二十日夜记梦》'
                }, {
                    'content': '曾经沧海难为水，除却巫山不是云。---元稹《离思五首·其四》'
                }, {
                    'content': '玲珑骰子安红豆，入骨相思知不知。---温庭筠《南歌子词二首 / 新添声杨柳枝词》'
                }, {
                    'content': '露从今夜白，月是故乡明。---杜甫《月夜忆舍弟》'
                }, {
                    'content': '人面不知何处去，桃花依旧笑春风。---崔护《题都城南庄》'
                }, {
                    'content': '寂寞空庭春欲晚，梨花满地不开门。---刘方平《春怨》'
                }, {
                    'content': '春宵一刻值千金，花有清香月有阴。---苏轼《春宵·春宵一刻值千金》'
                }]
            }
        }
    }
</script>
<style>
    #about{
        margin: 100px;
        width: 800px;
        border: 1px solid #494646;
    }
     /*调整滚动的样式，主要是高度*/
    .seamless-warp {
        height: 200px;
        overflow: hidden;
    }
    ul li{
        margin: 20px;
    }
</style>

4、若需调整滚动方向、单行停顿、鼠标悬停、停顿时间等参数请参考以下网址

https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default