better-scroll.js——一款更好用的移动端滚动插件

今天给大家介绍一款很好用的移动端滚动插件：better-scroll.js，它真可以算得上是实至名归，功能可谓是相当强大了。

我们先来看看它具体有哪些优势吧。

① 原生。不依赖于任何库或框架，完全基于原生 JS 实现。
② 轻量。编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb！
③ 强大。对于那些常规的滚动需求（如图片轮播，局部文字滚动等）均可轻松满足，完全可以媲美 Swiper.js 和 iScroll.js 等经典插件。

一、用法

1. 基础用法

new BScroll(".wrapper");

或者

let wrapper = document.querySelector('.wrapper');
new BScroll(wrapper);

以上两种方式都可以，其中wrapper为外层容器，而它只能有一个子元素。例如：

<div class="wrapper">
  <ul class="content">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <!-- 这里可以放一些其它的 DOM，但是会被忽略，且不会影响content部分滚动 -->
</div>

content元素就是滚动元素，它是wrapper的唯一子元素，且其高度必须大于wrapper的高度（若为横向滚动则content宽度须大于wrapper宽度），否则无法滚动。

我们可以继续看上面的例子，如果要实现一个最基本的滚动效果，还需要自己给它添加点样式才行。

/*设置高度是为了让content高度大于wrapper高度，否则无滚动效果*/
.wrapper{ height: 100px; overflow: hidden; background: #eee;}

这样一个简单的可滑动文字列表效果就出来了：

2. 进阶用法

上面只是简单讲了 better-scroll.js 最基础用法，无需任何配置即可使用。然鹅，很多情况下其实我们可能有其他各种类型滚动效果，如图片轮播、整屏滚动、多屏多向切换等。

① 图片轮播

说到图片轮播，我们首先可能想到的就是经典的 Swiper.js，而事实上我们其实还可以使用更加轻量级的 better-scroll.js 来替代。例如：

<div class="wrapper">
    <ul class="content">
        <li><img src="./images/img1.jpg" alt=""></li>
        <li><img src="./images/img2.jpg" alt=""></li>
        <li><img src="./images/img3.jpg" alt=""></li>
    </ul>
</div>

.wrapper{ width: 600px; height: 320px; overflow: hidden;}
.content{ margin: 0; padding: 0; width: 1800px; overflow: hidden;}
.content li{ float: left; width: 600px; list-style: none;}
.content li img{ display: block; width: 100%;}

new BScroll('.wrapper', {
  scrollX: true,
  scrollY: false,
  snap: {  // 滑动切换的一些配置
    speed: 800,  // 滑动切换的速度
    easing: {  // 滑动切换的动画效果
      style: 'ease-in'
    },
    threshold: 0.5,  // 滑动切换到超过一半时切换到下一屏
    stepX: 600,  // 横向切换距离为轮播图宽度
  }
});

实现效果如下：

可以看到，better-scroll.js 相对 Swiper.js 配置更加灵活，这是因为前者更加偏向于自由滑动，而后者更加偏重于轮播图效果，如果你不想自己手写样式和这么细的滑块配置的话，还是使用 Swiper.js 相对好一些。

② 整屏滚动

有了上面图片轮播的案例，整屏滚动看起来就简单了许多，因为 better-scroll.js 本身默认就是竖屏滚动，因此配置会更加简洁。

<div class="wrapper">
    <ul class="content">
        <li>第一屏</li>
        <li>第二屏</li>
        <li>第三屏</li>
    </ul>
</div>

body{ margin: 0;}
.wrapper{ height: 100vh; overflow: hidden;}
.content{ margin: 0; padding: 0;}
.content li{ display: flex; justify-content: center; align-items: center; height: 100vh; list-style: none; font-size: 50px; font-weight: bold; color: #fff;}
.content li:nth-child(1){ background: #f00;}
.content li:nth-child(2){ background: #0f0;}
.content li:nth-child(3){ background: #00f;}

new BScroll('.wrapper', {
  snap: {  // 滑块切换的一些配置
    threshold: 0.5,  // 滑动切换到超过一半时切换到下一屏
    stepY: window.innerHeight  // 纵向切换距离为窗口高度
  }
});

实现效果如下：

③ 多屏多向切换

这个切换方式可能比较少见，但是有时候确实可能需要实现这样的效果。

<div id="app">
    <article class="container">
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
    </article>
</div>

// Less代码
body{ margin: 0;}
body,
#app{
  width: 100vw; height: 100vh; overflow: hidden;
}
.container{
  display: grid;
  width: 300vw;
  height: 300vh;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.section{
  height: 100vh;
}
.loop(@i) when (@i <= 9){
  .section:nth-of-type(@{i}){
    background: url("../images/puzzle_img@{i}.jpg") no-repeat center; background-size: cover;
  }
  .loop(@i+1);
}
.loop(1);

new BScroll('#app', {
  scrollX: true,
  bounce: false,
  snap: {
    threshold: 0.5,
    stepX: window.innerWidth,
    stepY: window.innerHeight
  }
});

实现效果如下：

需要注意上面css部分其实写的是Less代码，里面用到了样式的循环，所以用Less等预编译语言写起来会轻松一些。

二、常见问题

1. 无法滚动

① 检查内容长度是否比外层容器长度要长，这个在文章开头有提过。
② 检查配置是否正确，看看是不是把滚动禁用了。

2. 无法触发点击事件

better-scroll 默认会阻止浏览器的原生 click 事件，所以须添加以下配置：

click: true

3. 无法长按识别二维码

这个是因为 better-scroll 会阻止浏览器的默认行为，比如页面原生的滚动功能，当然也包括长按识别二维码的功能，所以为了局部解除禁止，须添加以下配置：

preventDefaultException: {
  className: /^（此处填二维码图片的class属性）$/
}

例如，有个二维码图片标签如下：

<img class="qrcode" src="./images/qrcode.png" />

则相应的 better-scroll 配置为：

preventDefaultException: {
  className: /^qrcode$/
}

三、常用配置

为了方便使用，最后我给大家简单总结了一份比较常用的 better-scroll 配置：

{
  click: true,  // 元素可触发点击事件
  scrollX: false,  // 横向可滑动，默认为false
  scrollY: true,  // 纵向可滑动，默认为true
  bounce: false,  // 当滚动超过边缘的时候无回弹动画
  preventDefaultException: {  // 设置局部某元素原生事件不被禁止（默认preventDefault为true）
    className: 【正则表达式】
  },
  snap: {  // 滑动切换的一些配置
    speed: 800,  // 滑动切换的速度
    easing: {  // 滑动切换的动画效果
      style: 'ease-in'
    },
    threshold: 0.5,  // 滑动切换到超过一半时切换到下一屏
    stepX: window.innerWidth,  // 横向切换距离为窗口宽度
    stepY: window.innerHeight  // 纵向切换距离为窗口高度
  }
}

结束语

千言万语，不如三个字 ↓↓↓