vue之better-scroll处理滚动列表

心语：再长的路，一步步也能走完，再短的路，不迈开双脚也无法到达。

在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了，可以是竖向滚动的列表，也可以是横向的，用better-scroll可以帮助我们轻松的实现这个需求。

那么better-scroll到底是什么？

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。

为了满足这些场景，它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置，让滚动更加流畅，同时还提供了很多 API 方法和事件，以便我们更快地实现滚动场景下的需求，如下拉刷新、上拉加载。

首先，让我们来看一下它是怎样让滚动更流畅的吧。

如果仔细观察的小伙伴们会发现，原生滚动事件在pc端很正常，而在移动端如果你使用过 overflow: scroll 生成一个滚动容器，会发现它的滚动是比较卡顿，呆滞的。为什么会出现这种情况呢？

因为我们早已习惯了目前的主流操作系统和浏览器视窗的滚动体验，比如滚动到边缘会有回弹，手指停止滑动以后还会按惯性继续滚动一会，手指快速滑动时页面也会快速滚动。而这种原生滚动容器却没有，就会让人感到卡顿。

那么better-scroll 的实现原理到底什么呢？

在这之前，我们先来看一下浏览器的滚动原理： 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

其实better-scroll 的原理也是一样的，我们可以用一张图更直观的感受一下：

我们可以看到绿色部分为外部容器wrapper，而真正能滚动则是content的容器里的内容，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

总结下来可以滚动的前提：

• content要比wrapper高
• wrapper宽高值确定并且overflow: hidden

接下来，我们就在vue项目中来进行better-scroll 吧

1.安装 better-scroll

npm install better-scroll --save

2.引入

import BScroll from 'better-scroll'

这里我们新建一个scroll.vue单页面文件

<templete>
	<div class="wrapper" ref="wrap">
  <!-- better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽