Vue2安装和使用better-scroll滚动插件

官方文档：better-scroll: BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景 (gitee.com)

安装

NPM/CNPM

执行下述命令安装

npm install better-scroll --save
cnpm install better-scroll --save

配置使用

在代码中引入配置

//引入滚动插件
import BetterScroll from "better-scroll";

mounted(){
    new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})
  }

值得注意的是，要在有dom的时候执行这个插件，没有盒子不知道你要执行谁，在created生命周期中是有数据但是没节点的，需要在mounted生命周期下使用这个插件

better-scroll的核心是借鉴iscroll的，我们可以分析一下他的原理来确定一些注意点：

 <section class="wrapper">
      <div>
        <Swiper></Swiper>
        <Icons></Icons>
        <Recommend></Recommend>
      </div>
    </section>

以我的这段代码为例，我想让section的内容滚动section作为最外面的盒子，它里面是一定要有一个子盒子的，滚动的时候必须要达成子盒子的大小是小于section的，这样才能滚动得起来

在配置里有一个class类wrapper，一定要把它给父元素，也就是我代码里的section加的

不止可以通过class类，还可以通过ref

<section ref="wrapper">
      <div>
        <Swiper></Swiper>
        <Icons></Icons>
        <Recommend></Recommend>
      </div>
    </section>

this.$refs.wrapper
//获取dom结点

mounted(){
    new BetterScroll(this.$refs.wrapper, {
  movable: true,
  zoom: true
})
  }

这种方式也可以实现滚动，vue中的ref就是用来获取dom的