h5 better-scroll使用方法

HTML:

 
        
content

css:

// 包裹盒子
.wrap {
    height: 100%;
    >div {
        min-height: 100.1%; // 以防内容太少,导致滚动失败,可以通过js获取父元素高度 + 1px
    }
}

// 内容盒子
.content {
    
}

JS部分:



常用事件
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();

})

你可能感兴趣的:(h5 better-scroll使用方法)