您的位置:首页 > 其它

better-scroll 简单实用说明

2017-11-03 14:32 302 查看
参数说明:

startX: 0 开始的X轴位置

startY: 0 开始的Y轴位置

scrollY: true 滚动方向

click: true 是否启用click事件

directionLockThreshold: 5

momentum: true 是否开启动量动画,关闭可以提升效率

bounce: true 是否启用弹力动画效果,关掉可以加速

selectedIndex: 0

rotate: 25

wheel: false 是否监听鼠标滚轮事件

snap: false 自动分割容器,用于制作走马灯效果等

snapLoop: false

snapThreshold: 0.1

swipeTime: 2500

bounceTime: 700 弹力动画持续的毫秒数

adjustTime: 400

swipeBounceTime: 1200

deceleration: 0.001 滚动动量减速越大越快,建议不大于0.01

momentumLimitTime: 300

momentumLimitDistance: 15

resizePolling: 60 重新调整窗口大小时,重新计算better-scroll的时间间隔

preventDefault: true 是否阻止默认事件

preventDefaultException: { tagName: - /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件

HWCompositing: true 是否启用硬件加速

useTransition: true 是否使用CSS3的Transition属性,否则使用requestAnimationFram代替

useTransform: true 是否使用CSS3的Transform属性

probeType: 1 滚动的时候会派发scroll事件,会截流。2滚动的时候实时派发 - scroll事件,不会截流。 3除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件

Events 事件

let scroll = new BScroll(document.getElementById('wrapper'),{
probeType: 3
})

scroll.on('scroll', (pos) => {
console.log(pos.x + '~' + posx.y)
...
})


Events 列表

beforeScrollStart 滚动开始之前触发

scrollStart 滚动开始时触发

scroll 滚动时触发

scrollCancel 取消滚动时触发

scrollEnd 滚动结束时触发

flick

refresh

destroy 销毁better-scroll实例时触发

派发滚动

let scroll = new BScroll(document.getElementById('wrapper'))
scroll.scrollTo(0, 500)
...
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: