首先附上better-scrooll的github地址:https://github.com/ustbhuangyi/better-scroll
可以下载官方案例学习。
本人也会将better-scroll小案例上传自己github,附上本人使用better-scroll制作页面的github地址:https://github.com/seven77Zhou/vue-online-shop
一、DOM层级关系
<div class="wrapper">
<div class="content">
content...
</div>
</div>
wrapper里面不能存在多个同级div,如果你这样写:
<div class="classifyTitle" ref="wrapper">
<div class="">
ss
</div>
<ul>
<li v-for="(item,index) in classifyData.products">
<router-link :to="{name:'详情'}">{{item.title}}</router-link>
</li>
</ul>
</div>
那么ul中的元素将不能滚动
二、content是否被成功添加滚动相关style
以此dom结构为例:
<div class="classifyTitle" ref="wrapper">
<ul>
<li v-for="(item,index) in classifyData.products">
<router-link :to="{name:'详情'}">{{item.title}}</router-link>
</li>
</ul>
</div>
审查元素可以看到:
这样即添加成功的
三、wrapper 与 content 高度问题
只有content的高度大于wrapper高度时候,才可以滚动。
如何看?
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, {})
console.log(this.scroll)
}
})
F12就可以看到打印结果:
以上就是可以滚动的情况,wrapperHeight(616) < scrollHeight(750),hasVerticalScroll为true;
那如果这些数据不对,检查是否dom没有更新完就初始化BScroll了,要等dom更新完才能初始化
四、wrapper样式
.wrapper元素上要给定位
position: absolute;
left: 0;
top: 0;
overflow: hidden;