遇到个需求是做一个无缝滚动的列表,这个千辛万苦找到了一个插件 vue-seamless-scroll，还是要记录下来,不然下次可能还会再找。
1.安装
npm install vue-seamless-scroll --save
2.配置
2.1全局配置
在main.js中,配置
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
3.使用
当时找到这个但是还是有些配置不太懂 后来去npm上搜索一番，看了看文档找到了相关的参数配置
3.1参数配置
| 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/1 | 0 | Number |
| singleWidth | 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 | 0 | Number |
| waitTime | 单步停止等待时间(默认值1000ms) | 1000 | Number |
| switchOffset | 左右切换按钮距离左右边界的边距(px) | 30 | Number |
| autoPlay | 是否自动播放开关需要设置为false | true | Boolean |
| switchSingleStep | 手动单步切换step值(px) | 134 | Number |
| switchDelay | 单步切换的动画时间(ms) | 400 | String |
| switchDisabledClass | 不可以点击状态的switch按钮父元素的类名 | disabled | String |
| isSingleRemUnit | singleHeight and singleWidth是否开启rem度量 | false | Boolean |
3.2使用
<vue-seamless-scroll :data="list" :class-option="classOption" class="table-content">
<ul>
<li v-for="(item,index) in list" :key="index">
内容
</li>
</ul>
</vue-seamless-scroll>
<script>
computed: {
classOption () {
return {
singleHeight: 57,
waitTime: 2000,
step: 0.5,
hoverStop: false
}
}
},
</script>
<style>
.table-content {
height: 570px;
overflow: hidden;
}
</style>
ok了，基本的就完善了 里面的内容没有放进去,公司的业务代码,下面给你们看看效果图 （声明：数据都是自己模拟的mock数据，跟公司数据没有任何关系）
image.png
image.png
不会做gif图，没得办法只能截图 第一张是滚动中，第二征是正常的图，只要大家效果实现出来就ok了，图就撮合着看就好了。
