better-scroll

2018/09/13 08:20
阅读数 200

1、better-scroll是一款重点解决移动端各种滚动场景需求的插件,它的核心是借鉴iscroll的实现,它的api设计基本兼容iscroll
2、better-scroll是基于原生js实现的,不依赖任何框架/3、better-scroll 只滚动它(wrapper)下面的第一个子元素,其他元素会被忽略
子元素的高度大于父元素的高度 滚动原理/
4、横滚 子元素的宽度要大于父元素的宽度
5.startX,startY初始化的位置
6、scrollY 设置为true 开启纵向滚动
scrollX 设置为true 开启横向滚动
7、click/tap better-scroll 偶人会组织浏览器的原生click事件,设置为true,才能点击
8、scrollbar 渐隐渐现的效果
scrollbar:{
fade:true,
init而active:flase 滚动条是否可以交互
}
9、refresh()重新计算better-scroll
当DOM结构发生变化的时候务必调用确保滚动的效果正常
10、scrollTo(x,y,time,easing) 滚动到指定位置
11、scrollBy(x,y,time,easing) 相对于当前位置的偏移量
12、scrollToElement (el,time,offsetX,offsetY,easing) 滚动到指定的目标元素
el可以是字符串也可以是dom元素,如果是字符串的话,内部用queryselector转成一个dom对象
offssetX相对于目标元素的横轴偏移量,如果设置为true,则滚动到目标元素的中心位置
offsetY相对于目标元素的纵轴偏移量,如果设置为true,则滚动到目标元素的中心位置
13、destroy() 销毁BScroll实例
14、probeType(属性) 当需要获取滚动位置的时候,值是0-3 默认是0
当值为2的时候才会实时的派发
15、scroll (事件) 滚动过程中会触发scroll事件
16、scrollEnd 滚动结束之后的事件
touchEnd 手指或鼠标离开的时候触发
17、x scroll横轴的坐标
y scroll纵轴的坐标
maxScrollY 最大的纵向滚动位置
maxScrollX 最大的横向滚动的位置

 

 

 

 

better-scroll的参数和方法
格式:let obj=new BScroll(object,{[option1],..,})
Events 事件
beforeScrollStart 滚动开始之前触发
scrollStart 滚动开始时触发
scroll 滚动时触发
scrollCancel 取消滚动时触发
scrollEnd 滚动结束时触发
touchend 手指移开屏幕时触发

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部