新手快速掌握better-scroll的常用API
汇集配套功能的方法： 例如上拉刷新： 需开启，需监听，需完成
纵向的排版
HTML:
<!-- 1. 需要一个包裹容器 -->
<section class="wrap">
<!-- 滑动模块 -->
<div>
<!-- 内容区域 -->
content
</div>
</section>
css:
// 包裹盒子
.wrap {
height: 100%;
>div {
min-height: 100.1%; // 以防内容太少，导致滚动失败，可以通过js获取父元素高度 + 1px
}
}
// 内容盒子
.content {
}
JS:
<script src="./js/bscroll.min.js"></script>
<script>
window.onload = function () {
var bScroll = new BScroll('.wrap', {
scrollY: true // 默认
});
}
</script>
横向排版
HTML
<div class="menu-wrap">
<div>
<div class="content-nav">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
<span>菜单7</span>
<span>菜单8</span>
<span>菜单9</span>
<span>菜单10</span>
</div>
</div>
</div>
CSS
.menu-wrap {
position: relative;
height: px2rem(80);
line-height: px2rem(80);
}
.menu-wrap>div {
position: absolute;
}
.content-nav {
display: flex;
span {
width: px2rem(100);
margin: 0 px2rem(20);
}
}
JS
var bScroll = new BScroll('.menu-wrap', {
scrollX: true
});
常用方法
- refresh(); =>重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常
bScroll.refresh()
- scrollTo(x, y, time, easing); => 滚动到指定的位置
x: x轴位置，
y: y轴位置
time: 滚动动画时长
easing: 缓动函数 不建议修改
bScroll.scrollTo(0, -100, 1000);
- scrollToElement(el, time, offsetX, offsetY, easing); =》 滚动到指定元素
el：目标元素, 支持传入元素对象，字符串则以querySelector获取
time: 滚动动画执行时长（ms）, 默认0ms
offsetX 相对于目标元素的横轴偏移量 ，true表示为中心
offsetY 相对于目标元素的纵轴偏移量 ，true表示为中心
bScroll.scrollToElement('li:nth-child(10)', 1000)
- destroy(); 销毁better-scroll, 解绑事件
常用事件
- scroll: 监听滚动事件，
必须开启： probeType: 1 | 2 | 3
probeType:
1). 当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
2). 当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
3). 当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件
var bScroll = new BScroll('.wrap', {
probeType: 3
});
bScroll.on('scroll', function (obj) {
// obj: 位置(坐标)信息对象 {x, y}
})
- scrollEnd: 滚动结束触发
bScroll.on('scrollEnd', function (obj) {
// obj: 位置(坐标)信息对象 {x, y}
})
- pullingDown: 在一次下拉刷新的动作后，这个时机一般用来去后端请求数据。
1). 需要pullDownRefresh属性支持：
设置为true：可以开启下拉刷新，
设置为对象：
threshold： 可以配置顶部下拉的距离（threshold）决定刷新时机
stop： 回弹停留的距离（stop）
2). 需要finishPullDown()收尾
当下拉刷新数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载
var bScroll = new BScroll('.wrap', {
// pullDownRefresh: true // 默认stop: 40
pullDownRefresh: {
threshold：90,
stop: 0
}
});
bScroll.on('pullingDown', function () {
console.log('我想刷新数据');
// 干点啥
bScroll.finishPullDown();
})
- pullingUp: 在一次上拉加载的动作后，这个时机一般用来去后端请求数据。
1). 需要pullUpLoad属性支持
设置为true：可以开启上拉加载，
设置为对象：
threshold： 可以配置顶部上拉的距离（threshold）决定加载时机
stop： 回弹停留的距离（stop）
2). 需要finishPullUp()收尾
当下拉刷新数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。
bScroll.on('pullingDown', function () {
console.log('我想加载数据');
// 干点啥
bScroll.finishPullUp();
})
属性
- maxScrollX: scroll 最大横向滚动位置
maxScrollX 是负值:
bScroll.maxScrollX = -400;
- maxScrollY: scroll 最大纵向滚动位置
maxScrollY 是负值
bScroll.maxScrollY = -400;
