美文网首页
移动端滚动场景开源插件better-scroll的应用

移动端滚动场景开源插件better-scroll的应用

作者: handsomePeng | 来源:发表于2020-11-19 11:38 被阅读0次

    插件better-scroll应用

    说明

    BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。
    为了满足这些场景,它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置,让滚动更加流畅,同时还提供了很多 API 方法和事件,以便我们更快地实现滚动场景下的需求,如下拉刷新、上拉加载。
    由于它基于原生 JavaScript 实现,不依赖任何框架,所以既可以原生 JavaScript 引用,也可以与目前前端 MVVM 框架结合使用,比如,其官网上的示例就是与 Vue 的结合。
    首先,让我们来看一下它是怎样让滚动更流畅的吧。

    让滚动更流畅

    在移动端,如果你使用过 overflow: scroll 生成一个滚动容器,会发现它的滚动是比较卡顿,呆滞的。为什么会出现这种情况呢?
    因为我们早已习惯了目前的主流操作系统和浏览器视窗的滚动体验,比如滚动到边缘会有回弹,手指停止滑动以后还会按惯性继续滚动一会,手指快速滑动时页面也会快速滚动。而这种原生滚动容器却没有,就会让人感到卡顿。

    应用的前提(better-scroll的滚动原理)

    不能滚动是现象,我们得搞清楚这其中的根本原因。在这之前,我们先来看一下浏览器的滚动原理:

      浏览器的滚动条大家都会遇到,当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。
    

    那么对于 better-scroll 也是一样的道理,我们先来看一下 better-scroll 常见的 html 结构:

        <div class="wrapper"> 
            <ul class="content"> 
            <li>...</li> 
            <li>...</li>
             ...
             </ul>
        </div>
    
    

    为了更加直观,我们再来看一张图:

    图片.png

    绿色部分为 wrapper,也就是父容器,它会有固定的高度。黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 better-scroll 的滚动原理。

    那么,我们怎么初始化 better-scroll 呢,如果是上述 html 结构,那么初始化代码如下:

        import BScroll from 'better-scroll' 
        let wrapper = document.querySelector('.wrapper') 
        let scroll = new BScroll(wrapper, {})
    
    

    better-scroll 对外暴露了一个 BScroll 的类,我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象,第二个是一些配置参数,具体参考 better-scroll 的文档。

    特别说明:

    better-scroll 的初始化时机很重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,来决定是否可以纵向和横向滚动。因此,我们在初始化它的时候,必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候,必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。所以同学们反馈的 better-scroll 不能滚动的原因多半是初始化 better-scroll 的时机不对,或者是当 DOM 结构发送变化的时候并没有重新计算 better-scroll。

    better-scroll在vue中的应用

    安装better-scroll

    npm install --save better-scroll
    
    

    Usage

    import BetterScroll from 'better-scroll'
    
    let bs = new BetterScroll('.wrapper', {
      movable: true,
      zoom: true
    })
    
    

    better-scroll参数配置可参考文档:better-scroll使用文档(官方)

    相关文章

      网友评论

          本文标题:移动端滚动场景开源插件better-scroll的应用

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