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>
常用事件
scroll: 监听滚动事件，
必须开启： probeType: 1 | 2 | 3
probeType: 当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 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: 在一次下拉刷新的动作后，这个时机一般用来去后端请求数据。
需要pullDownRefresh属性支持：
设置为true：可以开启下拉刷新，
设置为对象：
threshold： 可以配置顶部下拉的距离（threshold）决定刷新时机
stop： 回弹停留的距离（stop）
需要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: 在一次上拉加载的动作后，这个时机一般用来去后端请求数据。
需要pullUpLoad属性支持
设置为true：可以开启上拉加载，
设置为对象：
threshold： 可以配置顶部上拉的距离（threshold）决定加载时机
stop： 回弹停留的距离（stop）
2 需要finishPullUp()收尾
当下拉刷新数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。
bScroll.on('pullingDown', function () {
console.log('我想加载数据');
// 干点啥
bScroll.finishPullUp();
})
