vue无缝滚动轮播 scroll

遇到个需求是做一个无缝滚动的列表,这个千辛万苦找到了一个插件 vue-seamless-scroll,还是要记录下来,不然下次可能还会再找。

1.安装

npm run 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使用


  
  • 内容

ok了,基本的就完善了 里面的内容没有放进去,公司的业务代码,下面给你们看看效果图 (声明:数据都是自己模拟的mock数据,跟公司数据没有任何关系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I4ROOONy-1589183509373)(https://upload-images.jianshu.io/upload_images/11611010-6860276b01ca8109.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ExFRHXZB-1589183509375)(https://upload-images.jianshu.io/upload_images/11611010-bca3347639e09109.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

不会做gif图,没得办法只能截图 第一张是滚动中,第二征是正常的图,只要大家效果实现出来就ok了,图就撮合着看就好了。

你可能感兴趣的:(js,vue)