格式:var obj = new BScroll(object,{[option1,],.,.});

注意:1、要确保object元素的高度比其父元素高

2、使用时,一定要确保object所在的dom渲染后再用上面的语句,或者fresh()

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: 0 wheel 为 true 时有效,表示被选中的 wheel 索引
rotate: 25 wheel 为 true 时有效,表示被选中的 wheel 每一层的旋转角度
wheel: false 该属性是给 picker 组件使用的,普通的列表滚动不需要配置
注意:最新版本的snap已修改,改为下面所示:
snap: {    该属性是给 slider 组件使用的,普通的列表滚动不需要配置
       loop: false, 是否可以无缝循环轮播
       threshold: 0.1, 用手指滑动时页面可切换的阈值,大于这个阈值可以滑动的下一页
       speed: 400 轮播图切换的动画时间

swipeTime: 2500 swipe 持续时间
bounceTime: 700 弹力动画持续的毫秒数
adjustTime: 400 wheel 为 true 有用,调整停留位置的时间
swipeBounceTime: 1200 swipe 回弹 时间
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 事件

beforeScrollStart - 滚动开始之前触发
scrollStart - 滚动开始时触发
scroll - 滚动时触发
scrollCancel - 取消滚动时触发
scrollEnd - 滚动结束时触发
touchend - 手指移开屏幕时触发
flick - 触发了 fastclick 时的回调函数
refresh - 当 better-scroll 刷新时触发
destroy - 销毁 better-scroll 实例时触发

Example:

let scroll = new BScroll(document.getElementById('wrapper'),{
   probeType: 3
})
 
scroll.on('scroll', (pos) => {
  console.log(pos.x + '~' + pos.y)
})

函数列表

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,解绑事件

转载:better-scroll的相关api的更多相关文章

  1. 细数AutoLayout以来UIView和UIViewController新增的相关API

    本文转载至 http://www.itjhwd.com/autolayout-uiview-uiviewcontroller-api/ 细数AutoLayout以来UIView和UIViewContr ...

  2. OpenGL FrameBufferCopy相关Api比较(glCopyPixels,glReadPixels,glCopyTexImage2D,glFramebufferTexture2D)

    OpenGL FrameBufferCopy相关Api比较 glCopyPixels,glReadPixels,glCopyTexImage2D,glFramebufferTexture2D 标题所述 ...

  3. QQ音乐的各种相关API

    QQ音乐的各种相关API 分类: oc2014-01-29 15:34 2676人阅读 评论(2) 收藏 举报 基本上论坛里做在线音乐的都在用百度的API,进来发现百度的API不仅歌曲的质量不可以保证 ...

  4. addChildViewController相关api深入剖析

    注:本文根据个人的实践和理解写成,若有不当之处欢迎斧正和探讨! addChildViewController是一个从iOS5开始支持的api接口,相关的一系列的接口是用来处理viewcontrolle ...

  5. [原创]java WEB学习笔记44:Filter 简介,模型,创建,工作原理,相关API,过滤器的部署及映射的方式,Demo

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  6. 关于iOS中用AudioFile相关API解码或播放AAC_HE_V2时仅仅能识别单声首22.05k採样率的问题

    关于iOS中用AudioFile相关API解码或播放AAC_HE_V2时仅仅能识别单声首22.05k採样率的问题 在官方AQPlayer Demo 和 aqofflinerender中.都用了Audi ...

  7. TCP/IP协议栈源码图解分析系列10:linux内核协议栈中对于socket相关API的实现

    题记:本系列文章的目的是抛开书本从Linux内核源代码的角度详细分析TCP/IP协议栈内核相关技术 轻松搞定TCP/IP协议栈,原创文章欢迎交流, byhankswang@gmail.com linu ...

  8. 【Socket编程】Java中网络相关API的应用

    Java中网络相关API的应用 一.InetAddress类 InetAddress类用于标识网络上的硬件资源,表示互联网协议(IP)地址. InetAddress类没有构造方法,所以不能直接new出 ...

  9. java 11 移除的一些其他内容,更简化的编译运行程序,Unicode 10,移除了不太使用的JavaEE模块和CORBA技术,废除Nashorn javascript引擎,不建议使用Pack200 相关api

    移除的一些其他内容 移除项 移除了com.sun.awt.AWTUtilities 移除了sun.misc.Unsafe.defineClass, 使用java.lang.invoke.MethodH ...

随机推荐

  1. 在img标签上尽量不要使用onerror事件

    在img标签上尽量不要使用onerror事件 因为在之前的时候,我在本地对用户头像修改发现,如果图片加载失败, 使用onerror事件去获取一个默认地址的图片虽然这是可行的,但是如果刚好onerror ...

  2. Jury Meeting CodeForces - 854D

    Jury Meeting CodeForces - 854D 思路:暴力枚举会议开始的那一天(只需用所有向0点飞的航班的那一天+1去枚举即可),并计算所有人此情况下去0点和从0点出来的最小花费. 具体 ...

  3. ios NSFileManager 用法详解

    转自:http://blog.csdn.net/ios_che/article/details/7287266 iPhone文件系统NSFileManager讲解是本文要介绍的内容,主要是通过ipho ...

  4. Linux下cpu过高问题排查

    原文地址:https://blog.csdn.net/chenjunan888/article/details/80447800 在服务器报cpu过高时,可使用以下命令,快速导出堆栈信息,以方便查看具 ...

  5. HBase文档操作--练习篇

    1.查询学生的所有信息 数据准备 var persons = [{ name:"jim", age:25, email:"75431457@qq.com", c ...

  6. solr 查询获取数量getCount()

    //前期设置好查询条件和参数 long numFound = 0; SolrQuery query = new SolrQuery("*:*"); query.setQuery(& ...

  7. android开发学习 ------- 【转】EventBus的学习理解

    EventBus是一个Android端优化的publish/subscribe消息总线,简化了应用程序内各组件间.组件与后台线程间的通信. 比如请求网络,等网络返回时通过Handler或Broadca ...

  8. Android Learning Note -- AsyncTask浅尝

    AsyncTask 实现原理 AsyncTask是Android提供的轻量级异步类,可以直接继承AsyncTask在类中实现异步操作,并提供接口反馈当前的异步执行程度(通过接口实现UI进度更新),最后 ...

  9. whereis参数

    -b  只找二进制文件 -m 只找在帮助文件manual路径下的文件 -s 只找原文件 -u 没有帮助文件的文件 whereis passwd

  10. 初用emmet

    下载emmet的pspad插件emmet.js.复制到pspad目录下的 script\JScript 文件夹. 输入 ul#nav>li.item$*4>{Item $} 但是没反应. ...