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

<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;

————————————————
版权声明：本文为CSDN博主「qiqi_77_」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qiqi_77_/article/details/79361413