vue使用 better-scroll的参数和方法详解
格式：varobj=newBScroll(object,{[option1,],.,.});
注意：
1、要确保object元素的高度比其父元素高
2、使用时，一定要确保object所在的dom渲染后，再用上面的语句，或者obj.refresh()
Options参数
- startX:0开始的X轴位置
- startY:0开始的Y轴位置
- scrollY:true滚动方向为Y轴
- scrollX:true滚动方向为X轴
- click:true是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用event._constructed，若是bs派发的则为true
- directionLockThreshold:5
- momentum:true当快速滑动时是否开启滑动惯性
- bounce:true是否启用回弹动画效果
- selectedIndex:0wheel为true时有效，表示被选中的wheel索引
- rotate:25wheel为true时有效，表示被选中的wheel每一层的旋转角度
- wheel:false该属性是给picker组件使用的，普通的列表滚动不需要配置
- snap:false该属性是给slider组件使用的，普通的列表滚动不需要配置
- snapLoop:false是否可以无缝循环轮播
- snapThreshold:0.1用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
- snapSpeed:400,轮播图切换的动画时间
- swipeTime:2500swipe持续时间
- bounceTime:700弹力动画持续的毫秒数
- adjustTime:400wheel为true有用，调整停留位置的时间
- swipeBounceTime:1200swipe回弹时间
- 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属性
- useTransform:true是否使用CSS3的Transform属性
- probeType:1滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
Events事件
代码实例：
letscroll=newBScroll(document.getElementById('wrapper'),{
probeType:3
})
scroll.on('scroll',(pos)=>{
console.log(pos.x+'~'+pos.y)
})
- beforeScrollStart-滚动开始之前触发
- scrollStart-滚动开始时触发
- scroll-滚动时触发
- scrollCancel-取消滚动时触发
- scrollEnd-滚动结束时触发
- touchend-手指移开屏幕时触发
- flick-触发了fastclick时的回调函数
- refresh-当better-scroll刷新时触发
- destroy-销毁better-scroll实例时触发
函数列表
scrollTo(x,y,time,easing)：滚动到某个位置，x,y代表坐标，time表示动画时间，easing表示缓动函数scroll.scrollTo(0,500)
scrollToElement(el,time,offsetX,offsetY,easing)：滚动到某个元素，el（必填）表示dom元素，time表示动画时间，offsetX和offsetY表示坐标偏移量，easing表示缓动函数
refresh()：强制scroll重新计算，当better-scroll中的元素发生变化的时候调用此方法
getCurrentPage()：snap为true时，获取滚动的当前页，返回的对象结构为{x,y,pageX,pageY}，其中x,y代表滚动横向和纵向的位置；pageX，pageY表示横向和纵向的页面索引。用法如：getCurrentPage().pageX
goToPage(x,y,time,easing)
snap为true，滚动到对应的页面，x表示横向页面索引，y表示纵向页面索引，time表示动画，easing表示缓动函数（可省略不写）
enable()启用better-scroll，默认开启
disable() 禁用better-scroll
destroy()销毁better-scroll，解绑事件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。