美文网首页vue
移动排版巨好用的:better-scroll

移动排版巨好用的:better-scroll

作者: XiaoAM | 来源:发表于2019-11-09 10:03 被阅读0次

    纵向的排版

    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()
    
    
    1. scrollTo(x, y, time, easing); => 滚动到指定的位置
      x: x轴位置,
      y: y轴位置
      time: 滚动动画时长
    easing: 缓动函数 不建议修改
    bScroll.scrollTo(0, -100, 1000);
    
    
    1. scrollToElement(el, time, offsetX, offsetY, easing); =》 滚动到指定元素
      el:目标元素, 支持传入元素对象,字符串则以querySelector获取
      time: 滚动动画执行时长(ms), 默认0ms
      offsetX 相对于目标元素的横轴偏移量 ,true表示为中心
      offsetY 相对于目标元素的纵轴偏移量 ,true表示为中心
    bScroll.scrollToElement('li:nth-child(10)', 1000)
    
    
    1. 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}
    })
    
    
    1. scrollEnd: 滚动结束触发
     bScroll.on('scrollEnd', function (obj) {
        // obj: 位置(坐标)信息对象 {x, y}
    })
    
    
    1. 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();
    
    })
    
    
    1. 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;
    
    
    1. maxScrollY: scroll 最大纵向滚动位置
      maxScrollY 是负值
    bScroll.maxScrollY = -400;
    
    

    相关文章

      网友评论

        本文标题:移动排版巨好用的:better-scroll

        本文链接:https://www.haomeiwen.com/subject/bubgbctx.html