vue使用better-Scroll常见问题记录

一、Scroll无法滚动问题记录：

1.wrapper的高度或宽度大于子元素的高度或宽度：
有时候，依靠better-scroll自主检测子元素高度可能会计算不及时，所以你需要在子元素渲染完毕时，调用better-scroll的refresh,重新计算高度，一般子元素渲染也是一个异步过程，所以一般数据请求完毕时给它refresh一下即可
2.若问题1排查过了，那么可能是你没有设置ScrollX，或ScrollY;
官网有一句话：

（1）你首先配置了eventPassthrough事件后，你如果是配置了纵向滚动，那么你可以不用设置scrollX，与scrollY，因为默认scrollX:false,scrollY：true;

但是当你配置了其为横向滚动的属性后，由于它还是默认scrollX:false,scrollY：true;，所以此时你横向纵向都不能滚动；因为由于eventPassthrough为：'vertical此时scrollY失效，而又因为默认设置了scrollX为false，所以两个其实都为false。
注：这个笔者亲身经历，因为当时由于竖向滚动使用得没问题，所以遇到使用横向的时候，就忽略了这个设置，导致检查了很久，浪费大量时间。

3.待踩坑，踩了之后补上……

二、无法获取元素宽度：

此处可能有误，因为我在dom元素上设置了v-if，如果改成v-show，应该不会有此问题，因为v-if会移除元素，可能没开始渲染我已经想获取该值，所以错误，v-show只是修改元素不可见而没有移除元素，所以此处应该记录有误，等待消磁使用再验证。
使用$refs取值时style.width的宽度无法获取，即that.$refs.h_classify_L.style.width：
只有使用：that.$refs.h_classify_L.clientWidth才可以获取长度：

输出：

三、元素点击事件无效：

官方文档有提到better Scroll会阻止元素原生点击事件，给于相关配置即可：

这中情况下，的确是可以生效。
如图是我组件的点击事件，且赋予了click：true；
并且所有元素都设置了cursor:pointer属性，且赋予了点击事件：
并且图中除了元素More为插槽元素，其他元素都为组件普通元素。
当鼠标移动到组件普通元素上面时：

当鼠标移动到组件插槽元素上面时：

当鼠标点击组件普通元素时：

打印结果：

当鼠标点击插槽元素时：

打印结果：无

总结：better Scroll设置click：true，只对普通元素起效果，对于插槽元素无效。

解决方案：只能把元素使用绝对定位或相对定位，把元素移出组件：

打印结果：