Loading... ## 功能介绍 ## 实现Vue的无缝连接滚动,详细效果请移步[codepen](https://codepen.io/ganboy-blog/pen/MWeKaGz) 官方演示移步[官方演示](https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default) ![效果演示,效果演示](https://i.loli.net/2020/10/14/fX41q6zyITKuZd8.gif) 该效果使用 [vue-seamless-scroll](https://github.com/chenxuan0000/vue-seamless-scroll) ## 功能特性 ## * [x] 基于requestAnimationFrame实现 * [x] 配置多满足多样需求 * [x] 目前支持上下左右无缝滚动,单步滚动,以及支持水平方向的手动切换功能 ## 安装 ## ## NPM ## ```bash npm install vue-seamless-scroll --save ``` ### CDN ## `https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js` ## 配置项 | 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|1.1.17版本前手动切换时候需要置为false|true|Boolean| |switchSingleStep|手动单步切换step值(px)|134|Number| |switchDelay|单步切换的动画时间(ms)|400|Number| |switchDisabledClass|不可以点击状态的switch按钮父元素的类名|disabled|String| |isSingleRemUnit|singleHeight and singleWidth是否开启rem度量|false|Boolean| 最后修改:2020 年 12 月 08 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 社会很单纯~复杂滴是人呐~谁能在乎我呀