页面滚动插件 better-scroll 的用法
better-scroll 是一个页面滚动插件，用它可以很方便的实现下拉刷新，锚点滚动等功能。
实现原理：父容器固定高度，并设置 overflow：hidden，子元素超出父元素高度后将被隐藏，超出部分可滚动且没有滚动条。
一. 立即使用
<body>
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
<script type="text/javascript" src="better-scroll.js"></script>
<script type="text/javascript">
new BScroll(document.getElementById(‘wrapper‘));
</script>
</body>
二. 结合 vue 使用
安装 better-scroll
npm install better-scroll页面中引入 better-scroll
import BScroll from ‘better-scroll‘如果不支持 import，可使用
var BScroll = require(‘better-scroll‘)
页面结构：
<div id="wrapper" ref="wrapper">
<ul class="container">
<li>...</li>
<li>...</li>
...
</ul>
</div>
注意：better-scroll 会将点击事件去掉，如果滚动部分需要有点击事件，需要在参数里加上 click：true。
同时，在 PC 上或某些手机端，由于未成功将 touchend 事件 move 掉，点击事件会执行两次。
better-scroll 派发的 event 事件和原生 js 的 event 有属性上的区别，其中有一个属性为 event._constructed。better-scroll 派发的事件中 event._constructed 为 true，原生点击事件中没有这个属性。
selectList(index,event){
if(!event._constructed){//如果不存在这个属性,则为原生点击事件，不执行下面的函数
return
}
}
根据官方 API 的解释可知，一些需要在页面数据变化完成后才执行的函数需要写在 $nextTick 中 。
this.$nextTick(() => {
this._initScroll()
})
三. better-scroll 参数
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: false 该属性是给 slider 组件使用的，普通的列表滚动不需要配置
- snapLoop: false 是否可以无缝循环轮播
- snapThreshold: 0.1 用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
- snapSpeed: 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 实例时触发
let scroll = new BScroll(document.getElementById('wrapper'),{
cilick: true,
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().pageXgoToPage(x, y, time, easing)
snap 为 true，滚动到对应的页面，x 表示横向页面索引，y 表示纵向页面索引， time 表示动画，easing 表示缓动函数（可省略不写）enable() 启用 better-scroll，默认开启
disable() 禁用 better-scroll
destroy() 销毁 better-scroll，解绑事件
页面滚动插件 better-scroll 的用法的更多相关文章
- 左侧 随着页面滚动固定 fixed. scroll .scrollTop
1.图片. 要求:随着页面滚动 . 左侧应该顶着 浏览器顶部, 向上回滚, 就恢复原状. 2. 代码: html <div class="all "> <!-- ...
- Scroll Depth – 衡量页面滚动的 Google 分析插件
Scroll Depth 是一个小型的 Google Analytics(谷歌分析)插件,可以让你衡量用户在页面上滚动了多远.它可以监控 25%.50%.75% 和 100% 四个滚动点,并发送谷歌分 ...
- 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果
Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...
- jquery 页面滚动到底部自动加载插件集合
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- Page Scroll Effects - 简单的页面滚动效果
Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- 20 个用于处理页面滚动效果的 jQuery 插件
对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...
- [转]用 jQuery 实现页面滚动（Scroll）效果的完美方法
转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...
随机推荐
- 一个简单 Go Web MVC 框架实现思路
需要的知识点 为了防止你的心里不适,需要以下知识点: Go 基本知识 Go 反射的深入理解 使用过框架 Go Web 服务器搭建 package main import ( "fmt&quo ...
- 转：getContextPath、getServletPath、getRequestURI的区别
假定你的web application 名称为news,你在浏览器中输入请求路径: http://localhost:8080/news/main/list.jsp 则执行下面向行代码后打印出如下结果 ...
- java 把InputStream流写入到文件中
基于流(Stream)的解决 流是单向的有方向性的描述信息流的对象,InputStream是输入流的接口,对程序来说是入,是读,可以从文件读,缓存区读,网络节点读等等. 写入文件,对程序来说是出,是写 ...
- ORA-20002: [WF_NO_USER] NAME=<name> ORIG_SYSTEM=NULL ORIG_SYSTEM_ID=NULL
Solution APPLIES TO: Identity Manager Connector - Version 10.1.2 to 10.1.2Oracle User Management - V ...
- 【转】【译】在 Windows 10 应用程序中注册任意依赖属性的改变
原文地址:http://visuallylocated.com/post/2015/04/01/Registering-to-any-DependencyProperty-changing-in-Wi ...
- [JS] Ajax请求会话过期处理
对于页面来说,处理session过期比较简单,一般只需在过滤器里面判断session用户是否存在,不存在则跳转页面到登陆页即可. 对于Ajax请求来说,这个办法则无效,只能获取到登录页的html代码. ...
- 万恶的KPI、新兴的OKR及让人纠结的程序员考核
最近两天在研究研发部门如何进行绩效管理(其实一直都在思考,关注,实践,总感觉无从下手,也想求助咨询公司,无奈囊中羞涩).查了两天的资料,主要的方向是KPI,OKR,谷歌等互联网公司的考核方法.这里做个 ...
- ubuntu Mono+Jexus 部署到 ASP.NET MVC 5
之前搞了很多次都是卡在了razor那个异常哪里,今天心血来潮就在试一试,一试竟然成功了,激动的我赶紧记录下历程.废话不说,走起... ubuntu 16.04 安装mono(最新版 5.14.0) 官 ...
- C# 基础篇
全篇依据 C#高级编程(第9版) 内容记录: 基础知识C# 5.0 基础 分为15章内容来介绍 核心C# 对象和类型 继承 泛型 数组 运算符和类型强制转换 委托和lambda表达式,事件 字符串和正 ...
- Spring+Ehcache
这里记录一下Spring+Ehcache的结合使用 1.添加依赖 <dependency> <groupId>org.springframework</groupId&g ...