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