h5 better-scroll使用方法

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();

})