better-scroll滚动插件的基础使用

better-scroll 滚动插件

• 官网地址

• 基础使用 (与 Swiper 用法很像)

  • 安装

    $ npm install better-scroll --save
    

  • 在需要使用的文件中引入

    import BScroll from 'better-scroll'
    

  • 创建实例（这里是进行真实 dom 操作，注意创建时机）

    let scroll = new BScroll('.wrapper', { // 需要传递父级元素
        scrollY: true, // 沿 y 轴滚动
        click: true  // 允许里面的点击事件
    })
    
    // 滚动到具体位置
    scroll.scrollTo(x, y, time, easing)
    // 滚动到具体元素
    scroll.scrollToElement(el, time, offsetX, offsetY, easing)
    
    // 更多配置 和 方法，需要查看官网
    

  • 原理：父级容器需要有固定高度，父容器的第一个子元素是需要滚动的内容，当内容的高度超过父容器的高度时就可以滚动了。