踩坑Better-Scroll框架

因为js原生的滚动条scroll在移动端会有卡顿的现象，所以开发者常常会使用scroll类的框架，比如 better-scroll 。

但是使用 better-scroll 需要注意一些问题。

当BScroll中的内容没有设置高度，而且包含图片的时候，有可能出现“拉不下去”的情况 ：

因为使用BScroll的时候，需要有一个.wrapper盒子包裹.content盒子。

当.content的内容高度高于.wrapper时，Bscroll便会出现滚动条，让用户可滚动以看完.contnt中的内容。

需要注意，这个可滚动的高度是由BScroll计算出来的，它内部有一个属性叫ScrollerHeight，其实就是.content与.wrapper的高度差，也是用户可滚动区域的高度。

所以问题就来了，因为图片等资源的加载是异步的，所以当你的.content包含大量的图片的时候，有可能这个ScrollerHeight已经计算出来了，但我们的图片可能还没有加载完成。

比如，当图片还没有加载完成的时候，BScroll计算出的ScrollerHeight是2000px，故用户可滚动区域被设定为2000px。

但是当图片加载下来之后，因为图片会撑起内容的高度，因而实际高度差会变大，那么此时用户可滚动高度就不应该是2000px了。但是BScroll却不会再重新计算ScrollerHeight，所以就会产生，明明我内容还没有看完，但是我滚动条拉不下去同时内容也卡在中间的情况，因为我能滚动的高度就只有ScrollerHeight所设定的高度那么高。

解决方法是在图片等资源加载完成后，调用BScroll的refresh方法，让它重新计算一次ScrollerHeight。

以下代码是在组件创建并挂载好后，让它监听自定义事件 itemImageLoad ，当图片加载完成时，它便会监听到这个事件，并执行scroll的scroll.refresh()方法，就能重新计算ScrollHeight了。

  mounted() {
    //图片加载完成的事件监听
    this.$bus.$on("itemImageLoad", () => {
      this.$refs.scroll.scroll.refresh();
    });
  },

当然，因为图片加载是异步的，所以图片如果能在BScroll计算ScrollerHeight前加载完成，或者提前写死内容区域的高度，是不会遇到这种情况的。

另外，在BScroll内使用fixed定位，也会遇到定位不准确的问题。

比如要完成吸顶效果，可能就要复制多一个一样的组件，然后通过控制显隐来达到效果，而不能简简单单通过改变定位方式来完成了。

后记：基本解决好这些个bug就没有太大问题了。