Better-scroll 插件使用（移动端常见滚动）

Better-scroll 插件使用

很多人会问，better-scroll是什么（what），什么场景用（when），怎么用（how），那我接下来就针对这个将我所理解的叙述一遍
是什么（what）：better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件（不懂？打开手机随意点餐app，打开商品页，上下滑动，没有滚动条却能实现滚动（所以better-scroll是在css样式为overflow：hidden的基础上实现，（关键，重点，很多时候就是这一点没注意，导致效果无法实现）），这便是better-scroll的功能和作用）
什么场景用（when）：简单来说就是在你需要你所展示的东西需要存在滚动，但不能出现滚动条时，此时你便可以考虑better-scroll插件了（Ps:better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。）
怎么用（how），下文我会通过我做过的案例进行讲解

Are you ready？

一．首先安装，在安装了vue-cli脚手架进行组件化开发时，安装有以下方法
1.在CMD中直接npm install better-scroll 或者 npm install better-scroll --save（save是当前目录，可加可不加）
2.或者是在package.Json文件中，手动输入，然后cnd 输入：npm install

二．安装之后可以去package.Json中的dependencies中查看是否成功安装，如果安装成功，那么便开始引用使用
哪里需要用，便在哪里引用，比如我在商品列表页使用便在此文件中引用
初始化完成之后便是对其进行利用。如何使用呢？
在此次vue-cli 项目中，我们利用vue.js提供的获取DOM对象的接口：vm.$refs
在随意方法中console.log(this),对vue进行查看（子容器的大小大于父容器的大小，才需要使用，在父容器上使用ref注册信息），如图所示

我们可以看到其原型上绑定了这么一个api，如图

那么$refs是什么呢？


知道了这两者我们在开始入手，
此图为商品列表，我需要将其进行滚动，便在其上进行ref=”name”进行注册

利用钩子函数created（），在其创造时便执行，但是在此项目中，vue是数据生成结构，而数据是通过axios（ajax）异步请求过来的，所以如果直接在created（）方法中，页面一打开会报错，undefined，找不到数据，所以我们需要通过异步的方式去初始化better-scroll，因为 Vue 是数据驱动的， Vue 数据发生变化（this.data = res.data）到页面重新渲染是一个异步的过程，我们的初始化时机是要在 DOM 重新渲染后，所以这里用到了 this.$nextTick，当然替换成 setTimeout(fn, 20) 也是可以的

成功之后，打开调试，看结构，在touch时，transform便会变化

效果如下：

注意：
1.效果无法实现：查找父容器是否使用overflow：hidden（必须存在）
2.效果无法实现：查找是否是子容器是否高于父容器（子和父容器都是唯一）

希望对您有所帮助，欢迎纠正！