better-scroll是一个在移动端和pc端都适用的滚动场景需求的插件,是基于原生的js实现,不依赖任何框架。
1、安装better-scroll
npm install --save better-scroll
安装完成后在package.json文件中的dependecies中会显示安装的插件;
2、在组件中引入插件
import BScroll from "better-scroll";
组件中dom结构:
<div id="wrap">
<div class="content"></div>
</div>
其中第一层div给一个高度来显示屏幕上可视的div高度,第二层div高度一定要比第一层div的高度要高;
mounted: function () {
var wrapper = new BScroll('#wrap');
}
到这里可以出现滚动效果了!