代码拉取完成，页面将自动刷新
同步操作将从 格鲁特宝宝/vue-seamless-scroll 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
一个简单的基于vue.js的无缝滚动
🐾在线文档demo | 🌾 demo | 📘 English Document
bug修复
配置更新
 IE |
 Firefox |
 Chrome |
 Safari |
 iOS |
 Android |
|---|---|---|---|---|---|
| IE9+ | ✓ | ✓ | ✓ | ✓ | ✓ |
npm install vue-seamless-scroll --save
https://cdn.jsdelivr.net/npm/vue-seamless-scroll@1.1.17/dist/vue-seamless-scroll.min.js
// **main.js**
// 1.全局 install
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})
// 2.单个.vue文件局部注册
<script>
import vueSeamless from 'vue-seamless-scroll'
export default {
components: {
vueSeamless
}
}
</script>
Example:
详情的demo页面 test/test.html
<html>
<head>
...
</head>
<body>
<div id="app">
<vue-seamless-scroll></vue-seamless-scroll>
</div>
<script src="vue.js"></script>
<script src="vue-seamless-scroll"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
| 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 |
| key | description | default | val |
|---|---|---|---|
navigation |
左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false | false |
Boolean |
| name | description | calback params |
|---|---|---|
ScrollEnd |
一次滚动完成的回调事件 | null |
1.最外层容器需要手动设置
width height overflow:hidden
2.左右的无缝滚动需要给主内容区域（即默认slot插槽提供）设定合适的
css width属性(否则无法正确计算实际宽度)。 也可以通过给他设置为display:flex;无需设置css width属性
3.step值不建议太小,不然会有卡顿效果(如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~,比如单步设置的30,step不能为4)
4.需要实现手动切换左右滚动的时候,必须设置
autoPlay:false（1.1.17版本开始，只需要设置navigation:false）,目前不支持环路
5.提供了
slot left-switch || right-switch可以自由定义需要的按钮样式 外层有div已经定位了位置居中,距离两边侧的距离可以通过switchOffset参数调整
6.当按钮到达边界位置,会自动为无法点击状态按钮加上定义的
switchDisabledClass: 'disabled',可以按需配置
See the GitHub 历史版本.
如果你想要js无缝滚动(无依赖)你可以切换到这里seamscroll。
欢迎给出一些意见和优化，期待你的 Pull Request。
vue-seamless-scroll is open source and released under the MIT License.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手