Scroll模拟滚动模块
Scroll模拟滚动模块可以重新定义一对父子节点的滚动关系,以模拟的滚动条代替默认的滚动条;最重要的是可以模拟出移动端头尾拖拽空白并反弹效果;另外支持子节点自动吸附,nest嵌套布局,多行多列布局等;该模块是swipe轮播模块的基础模块
简单使用
对有子元素的容器使用ax-scroll属性即可让子元素实现弹性拖拽。
也可以通过id+new的方式创建实例。
-
-
-
new ax.Scroll('#demo01');
基础配置
| 属性 |
类型 |
默认值 |
说明 |
| wrapper |
string |
'' |
滚动容器选择器 |
| flow |
'h'/'v' |
'v' |
滚动方向 |
| 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 |
完成跳转回调 |