1.首先安装better-scroll
npm install better-scroll --sava
2在需要使用的页面,导入
import BScroll from '@better-scroll/core'
3.然后在script代码中,加入
<script>
import BScroll from '@better-scroll/core'
export default {
data() {
return {
scroll: null
}
},
mounted() {
this.scroll = new BScroll(this.$refs.container, {
click: true
})
},
</script>
4.在页面的最外层套一层div并给个class和ref
<div class="container" ref="container">
<div>
内容....
</div>
</div>
5.给这个盒子加上定位
.container {
position: absolute;
top: 45px;
left: 0;
right: 0;
overflow: hidden;
}
遇到的问题:
当时我觉得什么代码都没有问题,所有代码都写了,但页面就是拖动不了,定位也加了,只要给页面加上better-scroll,页面就不能动了
解决方法:
查了很多文档才发现问题所在
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>
当 content的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动了,这就是 better-scroll 的滚动原理。
先理解其中的原理,去给content加个比wrapper更大的高度试试,页面就可以滚动了,
这个问题困扰了我好几个小时,也是在写样式的时候并不一定都会写高度,可能会出现某些不兼容,出现许多bug,大家可以去查阅文档,看看插件的使用说明,希望可以帮到大家