vue无缝滚动

vue无缝滚动插件地址：https://chenxuan1993.gitee.io/component-document/index_prod#/component/svg-bar-default

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" style='display:flex;justify-content:space-between;'>
				<div class="date">{{item.title}}</div>
				<div class="date">{{item.date}}</div>
            </li>
        </ul>
	</vue-seamless-scroll>
</template>
<script>
	export default {
		name: "homepage",
	  	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: {
			optionHover () {
				return {
				        waitTime: 2500,//时间
				        limitMoveNum: 8,//多少条开始滚动
				        direction: 1, // 0向下 1向上 2向左 3向右
						openWatch: true, //是否悬停
				    }
			}
		},
	}
</script>

<style  lang="scss" scoped>
	.seamless-warp {
	        height: 1.8rem;
	        overflow: hidden;
			width:100%;
	 }
	.item{
		/*list-style-type:none;*/
		border:0;
		margin: 0;
		width:100%;
		padding:0
	}
	.date{
		height:0.2rem;
		font-size:0.08rem
	}
</style>