vue使用 better-scroll的参数和方法详解


Posted in Javascript onJanuary 25, 2018

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

注意:

1、要确保object元素的高度比其父元素高
2、使用时,一定要确保object所在的dom渲染后,再用上面的语句,或者obj.refresh()

Options 参数

  1. startX: 0 开始的X轴位置
  2. startY: 0 开始的Y轴位置
  3. scrollY: true 滚动方向为 Y 轴
  4. scrollX: true 滚动方向为 X 轴
  5. click: true 是否派发click事件,通常判断浏览器派发的click还是betterscroll派发的click,可以用event._constructed,若是bs派发的则为true
  6. directionLockThreshold: 5
  7. momentum: true 当快速滑动时是否开启滑动惯性
  8. bounce: true 是否启用回弹动画效果
  9. selectedIndex: 0 wheel 为 true 时有效,表示被选中的 wheel 索引
  10. rotate: 25 wheel 为 true 时有效,表示被选中的 wheel 每一层的旋转角度
  11. wheel: false 该属性是给 picker 组件使用的,普通的列表滚动不需要配置
  12. snap: false 该属性是给 slider 组件使用的,普通的列表滚动不需要配置
  13. snapLoop: false 是否可以无缝循环轮播
  14. snapThreshold: 0.1 用手指滑动时页面可切换的阈值,大于这个阈值可以滑动的下一页
  15. snapSpeed: 400, 轮播图切换的动画时间
  16. swipeTime: 2500 swipe 持续时间
  17. bounceTime: 700 弹力动画持续的毫秒数
  18. adjustTime: 400 wheel 为 true 有用,调整停留位置的时间
  19. swipeBounceTime: 1200 swipe 回弹 时间
  20. deceleration: 0.001 滚动动量减速越大越快,建议不大于0.01
  21. momentumLimitTime: 300 符合惯性拖动的最大时间
  22. momentumLimitDistance: 15 符合惯性拖动的最小拖动距离
  23. resizePolling: 60 重新调整窗口大小时,重新计算better-scroll的时间间隔
  24. preventDefault: true 是否阻止默认事件
  25. preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
  26. HWCompositing: true 是否启用硬件加速
  27. useTransition: true 是否使用CSS3的Transition属性
  28. useTransform: true 是否使用CSS3的Transform属性
  29. 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 + '~' + pos.y)
})
  1. beforeScrollStart - 滚动开始之前触发
  2. scrollStart - 滚动开始时触发
  3. scroll - 滚动时触发
  4. scrollCancel - 取消滚动时触发
  5. scrollEnd - 滚动结束时触发
  6. touchend - 手指移开屏幕时触发
  7. flick - 触发了 fastclick 时的回调函数
  8. refresh - 当 better-scroll 刷新时触发
  9. 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,解绑事件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
Dec 31 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 #Javascript
基于vue开发的在线付费课程应用过程
Jan 25 #Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 #Javascript
关于express与koa的使用对比详解
Jan 25 #Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 #Javascript
Vue框架之goods组件开发详解
Jan 25 #Javascript
前端MVVM框架解析之双向绑定
Jan 24 #Javascript
You might like
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
常用的js方法合集
2017/03/10 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
初学Python实用技巧两则
2014/08/29 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
python中单下划线_的常见用法总结
2018/07/10 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
Python作用域与名字空间原理详解
2020/03/21 Python
互动出版网:专业书籍
2017/03/21 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
《临死前的严监生》教学反思
2014/02/13 职场文书
暑期研修感言
2014/02/17 职场文书
给市场的环保建议书
2014/05/14 职场文书
企业文明单位申报材料
2014/05/16 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
分公司任命书
2014/06/06 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记