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 相关文章推荐
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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类
2006/11/25 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
php的dl函数用法实例
2014/11/06 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
python 中文字符串的处理实现代码
2009/10/25 Python
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python将ip地址转换成整数的方法
2015/03/17 Python
深入理解Javascript中的this关键字
2015/03/27 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
中秋晚会活动方案
2014/08/31 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
统计员岗位职责范本
2015/04/14 职场文书
表扬信格式模板
2015/05/05 职场文书
小平小道观后感
2015/06/09 职场文书
世界文化遗产导游词
2019/08/07 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Python中super().__init__()测试以及理解
2021/12/06 Python