当我们在制作APP页面的时候,往往需要将内容固定,但是固定后并不能滑动,所以可以借助better-scroll插件来实现滚动。
一、安装better-scroll
npm i better-scroll
二、配置DOM结构
滚动的DOM结构需要有一个父盒子和一个子盒子。
父盒子的高度必须比子元素的高度低才能实现滚动的效果。
<div class="wrapper">
<div class="content">
/* 内容 */
</div>
</div>
三、引入 better-scroll
import BScroll from 'better-scroll'
四、配置better-scroll
const bs = new BScroll('.wrapper', {
pullUpLoad: true,
scrollbar: true,
pullDownRefresh: true
// and so on
})
注意:在Vue中配置的时候,需要在mounted生命周期中进行配置。