better-scroll滚动无效 几种原因

首先附上better-scrooll的github地址：https://github.com/ustbhuangyi/better-scroll

可以下载官方案例学习。

本人也会将better-scroll小案例上传自己github，附上本人使用better-scroll制作页面的github地址：https://github.com/seven77Zhou/vue-online-shop

一、DOM层级关系

1. <div class="wrapper">

2. <div class="content">

3. content...

4. </div>

5. </div>

wrapper里面不能存在多个同级div，如果你这样写：

1. <div class="classifyTitle" ref="wrapper">

2.     <div class="">

3. ss

4.     </div>

5.     <ul>

6. <li v-for="(item,index) in classifyData.products">

7.     <router-link :to="{name:'详情'}">{{item.title}}</router-link>

8. </li>

9.     </ul>

10. </div>

那么ul中的元素将不能滚动

二、content是否被成功添加滚动相关style

以此dom结构为例：

1. <div class="classifyTitle" ref="wrapper">

2. <ul>

3.     <li v-for="(item,index) in classifyData.products">

4. <router-link :to="{name:'详情'}">{{item.title}}</router-link>

5.     </li>

6. </ul>

7. </div>

审查元素可以看到：

这样即添加成功的

三、wrapper 与 content 高度问题

只有content的高度大于wrapper高度时候，才可以滚动。

如何看？

1. this.$nextTick(() => {

2.     if (!this.scroll) {

3. this.scroll = new BScroll(this.$refs.wrapper, {})

4. console.log(this.scroll)

5.     }

6. })

F12就可以看到打印结果：

以上就是可以滚动的情况，wrapperHeight(616) < scrollHeight(750)，hasVerticalScroll为true；

那如果这些数据不对，检查是否dom没有更新完就初始化BScroll了，要等dom更新完才能初始化

四、wrapper样式

.wrapper元素上要给定位

1. position: absolute;

2. left: 0;

3. top: 0;

4. overflow: hidden

或者

position: relative