移动排版better-scroll的用法

新手快速掌握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
});

---

常用方法

1. refresh(); =>重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常

 bScroll.refresh()

2. scrollTo(x, y, time, easing); => 滚动到指定的位置
   x: x轴位置，
   y: y轴位置
   time: 滚动动画时长

easing: 缓动函数 不建议修改

bScroll.scrollTo(0, -100, 1000);

3. scrollToElement(el, time, offsetX, offsetY, easing); =》 滚动到指定元素
   el：目标元素, 支持传入元素对象，字符串则以querySelector获取
   time: 滚动动画执行时长（ms）, 默认0ms
   offsetX 相对于目标元素的横轴偏移量 ，true表示为中心
   offsetY 相对于目标元素的纵轴偏移量 ，true表示为中心

bScroll.scrollToElement('li:nth-child(10)', 1000)

4. destroy(); 销毁better-scroll, 解绑事件

---

常用事件

1. 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}
})

2. scrollEnd: 滚动结束触发

 bScroll.on('scrollEnd', function (obj) {
    // obj: 位置(坐标)信息对象 {x, y}
})

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

})

4. pullingUp: 在一次上拉加载的动作后，这个时机一般用来去后端请求数据。

1). 需要pullUpLoad属性支持
设置为true：可以开启上拉加载，
设置为对象：
threshold： 可以配置顶部上拉的距离（threshold）决定加载时机
stop： 回弹停留的距离（stop）

2). 需要finishPullUp()收尾
当下拉刷新数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。

bScroll.on('pullingDown', function () {

    console.log('我想加载数据');
    // 干点啥
    bScroll.finishPullUp();

})

属性

1. maxScrollX: scroll 最大横向滚动位置
   maxScrollX 是负值:

bScroll.maxScrollX = -400;

2. maxScrollY: scroll 最大纵向滚动位置
   maxScrollY 是负值

bScroll.maxScrollY = -400;