vue 左右循环滑动_vue实现无缝滚动循环

大家好，我是一叶，最近做的项目用到循环滚动展示，在这里踩的坑和大家分享一下。一开始写的时候没打算用组件(其实是没找到)，思路也很简单。把数据遍历之后，用js获取到可视范围的宽高，再逐次减去他的顶部高度，即可实现滚动的效果。怎么实现循环呢，数据跑一遍之后，会形成一段空白，只要我们再遍历一次数据，把高度掩盖，这样就可以达到首尾相接的循环效果(顿时感觉要起飞)。后来基于现实的需要，也就是这样做会造成CPU的浪费，没必要跑两次数据。

经过多方考证(从git上找到了组件)，决定采用vue-seamless-scroll来实现数据的滚动。至于怎么好用我就不打广告了，谁用谁知道。

组件使用地址：

可以参考里面例子，你想要的他懂你。

命令行执行：

npm install vue-seamless-scroll --save

然后在main.js中引用：

import scroll from 'vue-seamless-scroll'

Vue.use(scroll)

接下来在页面里引用该组件。

引入代码，在html里如图1所示。

图1(点击查看大图)

为了实现效果，还得在css里设置一下，给他一个初始高度，因为.scroll的父类设置过高度，所以这里height：100%，具体得看自己项目而来。

.scroll{

height: 100%;

overflow