Scroll模拟滚动模块

Scroll模拟滚动模块可以重新定义一对父子节点的滚动关系,以模拟的滚动条代替默认的滚动条;最重要的是可以模拟出移动端头尾拖拽空白并反弹效果;另外支持子节点自动吸附,nest嵌套布局,多行多列布局等;该模块是swipe轮播模块的基础模块

简单使用

对有子元素的容器使用ax-scroll属性即可让子元素实现弹性拖拽。

  • 输出
  • HTML
  • 子元素
  •                 
                    
                

也可以通过id+new的方式创建实例。

  • 输出
  • HTML
  • JS
  • 子元素
  •                 
                    
                
  •                 
                    new ax.Scroll('#demo01');
                    
                

基础配置

属性 类型 默认值 说明
wrapper string '' 滚动容器选择器
axis 'x'/'y' 'y' 滚动方向
bounce boolean true 是否允许边缘回弹
delay number 200 尺寸变化防抖延时
gridded boolean false 是否使用grid布局
dmpRatio number 0.5 拖拽阻尼系数
insertable boolean true 动画中是否可插入事件

吸附配置

属性 类型 默认值 说明
snap.enable boolean false 是否启用吸附
snap.mode 'auto'/'manual' 'auto' 吸附模式
snap.force boolean false 是否强制再次吸附
snap.offset number 0 吸附偏差值
snap.selector string '' 吸附节点选择器

漂移配置

属性 类型 默认值 说明
drift.enable boolean false 是否启用漂移
drift.mode 'auto'/'snap'/'slide'/'ratio'/'const' 'auto' 漂移模式
drift.value number 0 漂移步进值
drift.coef number 2 漂移系数

滑动配置

属性 类型 默认值 说明
swipe.enable boolean false 是否启用滑动
swipe.mode 'auto'/'snap'/'slide'/'ratio'/'const' 'auto' 滑动模式
swipe.value number 0 滑动步进值
swipe.coef number 2 滑动系数

滚动条配置

属性 类型 默认值 说明
bar.enable boolean false 是否显示滚动条
bar.sticky boolean false 是否默认显示
bar.triggerable boolean true 是否可触发拖动

初始化配置

属性 类型 默认值 说明
initial.value number/DOM/string 0 初始滚动距离
initial.mode 'scroll'/'locate' 'scroll' 跳转模式
toInitMode 'scroll'/'locate' 'scroll' 初始化滚动模式
duration number 300 动画基础时间(ms)
resizeThr number 1 重置次数阈值

子元素配置

属性 类型 默认值 说明
child.size number/string/null null 子元素尺寸
child.gap number/string 0 子元素间距
child.settable boolean false 是否设置尺寸

滚轮配置

属性 类型 默认值 说明
wheel.mode 'snap'/'slide'/'const'/'ratio' 'const' 滚轮模式
wheel.value number 0 滚动距离
wheel.reverse boolean false 是否反向滚动
keyboard boolean false 是否启用键盘控制

边界配置

属性 类型 默认值 说明
completedThr number 50 完成阈值(px)
paddingStart number/string 0 头部边界距离
paddingEnd number/string 0 尾部边界距离

等待函数

属性 类型 默认值 说明
b4ToStart function null 头部回弹前等待
b4ToEnd function null 尾部回弹前等待

回调函数

属性 类型 默认值 说明
onCompleted function null 拖出完成回调
onExceed function null 超出边界回调
onStart function null 开始触摸回调
onMove function null 移动过程回调
onEnd function null 结束触摸回调
onGetSnappeds function null 获取吸附项回调
onRefactored function null 节点变化回调
onSnap function null 开始吸附回调
onSnapped function null 完成吸附回调
onResized function null 完成重置回调
onScroll function null 开始滚动回调
onScrolled function null 完成滚动回调
onLocate function null 开始跳转回调
onLocated function null 完成跳转回调