VUE（滚动插件）————better-scroll插件使用

                             What is better-scroll ? 

更好的滚动是一个插件，其目的是解决移动环境下的滚动环境（也许支持PC方面的未来）。核心的灵感来自iscroll实施，所以更好的滚动API是对整个iscroll兼容。什么是更多，更好的滚动也延伸的一些特点和优化性能的基础上iscroll。这里比较下区别

更好的滚动是用普通JavaScript实现的，这意味着它是不依赖的。编译的代码的大小是46 KB，26 KB的压缩后，经过GZIP只有7KB。更好的滚动是一个非常轻量级的JavaScript库。

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，

better-scroll 很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

插件的作用：

1. 在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了，，可以是竖向滚动的列表。

2.也可以是横向滚动的导航栏。

（我们在实现这类滚动功能的时候，会用到我写的第三方库，better-scroll）

better-scroll 的滚动原理：

不少同学可能用过 better-scroll，很多反馈最多的问题是：

 better-scroll 初始化了， 但是没法滚动。

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

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

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

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

那么，我们怎么初始化 better-scroll 呢，那么初始化代码如下：

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。

现在移动端都会有页面滚动的需要， 如果使用样式overflow：auto或scroll属性，这样的页面就会出现两个滚动条，用户体验会有很大折扣，所以给介绍一款插件better-scroll，附加github资源链接（https://github.com/ustbhuangyi/better-scroll）;,

这款插件是基于（ 移动端滚动插件iScroll ）的重新封装。修复了很多的bug