vue+ele之（四）—vue-seamless-scroll

因为要做一个无缝滚动的判断，在这里我用到了vue-seamless-scroll，但是因为要加一些判断，所以对它进行了一些改动，在求助之后才把问题解决，也是心累了。

npm install vue-seamless-scroll --save

在main.js中，正常配置是：

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

由于原来的vue-seamless-scroll里面的功能满足不了如何根据容器的高度来判断什么时候滚动，所以对组件有改动，这里在main.js里面需要重新配置,这里引入的是vue-seamless-scroll/src里面的myClass，使用方法跟之前的一样，

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

在不安装vue-seamless-scroll的情况下，直接在当前页面引入myClass.vue，我这里把myClass.vue改成了marquee.vue，使用方法为

引入

使用

设置

myClass.vue里面改动的地方为moveSwitch()

这个是基本的使用，相关的配置参数介绍如下

key	description	default	val
`step`	数值越大速度滚动越快	`1`	`Number`
`limitMoveNum`	开启无缝滚动的数据量	`5`	`Number`
`hoverStop`	是否启用鼠标hover控制	`true`	`Boolean`
`direction`	方向 0 往下 1 往上 2向左 3向右	`1`	`Number`
`openTouch`	移动端开启touch滑动	`true`	`Boolean`
`singleHeight`	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	`0`	`Number`
`singleWidth`	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	`0`	`Number`
`waitTime`	单步停止等待时间(默认值1000ms)	`1000`	`Number`
`switchOffset`	左右切换按钮距离左右边界的边距(px)	`30`	`Number`
`autoPlay`	是否自动播放使用switch切换时候需要置为false	`true`	`Boolean`
`switchSingleStep`	手动单步切换step值(px)	`134`	`Number`
`switchDelay`	单步切换的动画时间(ms)	`400`	`Number`
`switchDisabledClass`	不可以点击状态的switch按钮父元素的类名	`disabled`	`String`
`isSingleRemUnit`	singleHeight and singleWidth是否开启rem度量	`false`	`Boolean`

这个是修改后的使用，修改的配置参数介绍如下

key	description	default	val
`limitMoveNum`	开启无缝滚动的高度	`50`	`Number`

在参数配置中，如果使用autoplay属性，必须要在v-for的标签上加width属性,否则页面排版会有问题