使用better-scroll插件无法滚动原因

一、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结构为例：

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>  

审查元素可以看到：

 

图片1.png

 

这样即添加成功的

三、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就可以看到打印结果：

 

图片1.png

 

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

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

四、wrapper样式

.wrapper元素上要给定位

position: absolute;
left: 0;
top: 0;
overflow: hidden;
width:100%;