JS----Better Scroll的使用

我们在app中使用原生滚动框的时候会发生卡顿的问题，并且如果需要上拉加载、下拉刷新等功能的时候，需要我们自己监听js事件，很不方便，这个时候使用better-scroll就会很方便的实现这一系列的功能。

1.下载js文件：

1.better_scroll.js网盘地址：
        链接：https://pan.baidu.com/s/1RpuiAExe7tGdMkTDs8QIXg 
        提取码：5qkp 
2.better_scroll参考文档：
        链接：https://pan.baidu.com/s/1fzhFVsfOVlFf_9pEaS-loA 
        提取码：u3b4 

2.定义滚动区域：

在使用滚动框的时候我们需要定义一个滚动区域，当内容小于滚动区域的时候，不会发生滚动，当内容大于滚动区域的时候就会发生滚动。
注意：better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略

//示例html代码：
        <div id="wrapper" style="overflow:hidden;height:400px;">
                <tag></tag>
        </div>
//示例js代码：
        <script>
                let wrapper = document.getElementById("wrapper")
                let bs = BetterScroll.createBScroll(wrapper ,{})
        </script> 

3.createBScroll的第二个参数：

createBScroll的第二个参数是一个对象，我们需要使用Better Scroll的功能时就需要在这里面定义

4.下拉刷新功能：

//示例代码：
        <script>
                let wrapper = document.getElementById("wrapper")
                let bs = BetterScroll.createBScroll(wrapper, {
                pullDownRefresh:{
                  threshold: 10,
                  stop: 20
                }
                })
                //下拉刷新..
                bs.on('pullingDown',function(e){
                        console.log('要开始下拉刷新了')
                        bs.finishPullDown();        //注意完成刷新之后一定要调用此方法，否则下次下拉刷新无效
                })
        </script>

5.上拉加载功能：

//示例代码：
        <script>
                let wrapper = document.getElementById("wrapper")
                let bs = BetterScroll.createBScroll(wrapper, {
                        pullUpLoad: {
                                threshold: 50
                        }
                })
                //上拉加载..
                bs.on('pullingUp',function(e){
                        console.log('要开始上拉加载了')
                        bs.finishPullUp();    //加载完成需要调用此方法，否则下次上拉加载无效
                })
        <script>

6.点击回到顶部：

//示例html代码：
        <button onclick="gotop()">回到顶部</button>
//示例js代码：
        function gotop(){
                bs.scrollTo(0,0)
        }