javascript中better-scroll

better-scroll它可以用手指拖动滑动,比滚动条高级些。还可以上拉刷新后台数据,下拉加载。
需要开启,默认会是false,开启是true。还需要监听,
使用方法:
在html中先创建两部分
1,容器
2,滑块


  

二、引入、创建
1、在script中引入better‑scroll.js
2、初始化:
var newbs = new BScroll('容器的名字',{参数里面设置的对象})
例如:

 var myBs = new BScroll('#container', {
        click: true, // 当需要添加点击事件的时候,需要将其click属性设为true
        // 监听是否在滚动
        probeType: 3,

        // 开启下拉刷新,这个
        pullDownRefresh: true,

        // 开启上拉加载
        pullUpLoad: {
            threshold: -90,
        }
    });

  myBs.on('scroll', function (size) {
            // console.log(size);
        });
        myBs.on('scrollEnd', function (size) {
            console.log('滚动结束');
        });
        // 监听下拉刷新
        myBs.on('pullingDown', function () {
            console.log('下拉刷新结束');
            // 添加元素
            var li = document.createElement('li');
            li.innerText = '参数有了';

            // 父元素.insertBefore(新的子元素, 参考子元素)
            myBs.finishPullDown();
        });

        myBs.on('pullingUp', function () {
            console.log(2);
            for (var i = 0; i < 100; i++) {
                var li = document.createElement('li');
                li.innerText = '参数有了';
        
            }
            myBs.finishPullUp();    
        });

知识补充
pullingDown (用前先开启) 下拉刷新 ,这个时机一般用来去后端请求数
据。
需要finishPullDown()配套使用
当下拉刷新数据加载完毕后,需要调用此方法表示 better‑scroll 数据已
加载
bScroll.on('pullingDown', function () {
console.log('刷新数据');

bScroll.finishPullDown();
})
pullingUp: 在一次上拉加载的动作后,这个时机一般用来去后端请求数
据。

  1. 需要pullUpLoad属性支持
    设置为true:可以开启上拉加载,
    设置为对象:
    threshold: 可以配置顶部上拉的距离(threshold)决定加载时机
    stop: 回弹停留的距离(stop)
    2 需要finishPullUp()收尾
    当下拉刷新数据加载完毕后,需要调用此方法告诉 better‑scroll 数据已
    加载。

你可能感兴趣的:(javascript中better-scroll)