- 安装better-scroll
cnpm install better-scroll --save - 引入better-scroll
import BScroll from "better-scroll"; - html中结构(必须只有一个子容器<就是要滚动的内容>)
<div ref="wrapper" class="home"> <div class="main"> 滚动的内容区域 </div> </div> - 样式
.home { position: absolute; overflow: hidden; height: 100%; width: 100%;} .main { width: 100%; height: auto; display: flex; display: -webkit-inline-flex; flex-direction: column; align-items: center; position: relative; background-color: rgba(0, 0, 0, 0.9);} - 初始化滚动(必须为dom全部渲染完成才调用,可写在monted或者update生命周期,或者写在数据请求完成的回调函数里也可以)
this.$nextTick(() => { this.scroll = new BScroll(this.$refs.wrapper, { click: true, bounce: false }); }); - 中文文档
ustbhuangyi.github.io/better-scro…