Vue中使用better-scroll实现滑动效果

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。

注意事项

• better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
• 外盒子设置固定宽或高和属性：overflow: hidden;
  安装

npm install better-scroll --save

因为这个插件在很多地方都会用到，同时有些配置是需要再手动添加的，所有我们要基于这个插件的基础上再去手动封装一个组件。

在components文件夹中新建一个scroll.vue文件

接下来在要使用better-scroll的组件中进行操作
1.首先引入
import scroll from "@/components/scroll";
2.注册

components: {
    scroll
}

3.使用

注意：如果scroll标签内包裹的组件，但是数据也是会随时刷新的，:data传递scroll标签包裹元素要用到的数据就可以，这个传递的data的作用就是scroll组件可以监听这个数据，一旦发生变化，会触发自身的refresh事件，重新计算元素的高度。
也就说，当被scroll标签内的元素的数据是静态的，可以不给scroll传递data。

4.给要滚动的盒子添加高度和overflow样式

.page-info-list {
    height: calc(100vh - 380px);
    overflow: hidden;
}

这样的话，其它部分不需要固定定位，scroll包裹的部分就可以实现在自己内部的滚动了。