better-scroll滚动无效原因

1. DOM层级关系

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

<div class="wrapper" ref="aaa">
    <p>你好</p>
    <ul class="content">
      <li>分类列表1</li>
      <li>分类列表2</li>
      <li>分类列表3</li>
	  .....
    </ul>
  </div>

• p标签和ul标签是同级关系，所以ul里面的滚动效果是无效的
• 删掉p标签就可以了

2.高度的计算错误

官方：
BetterScroll 滚动原理是 content 元素的高度／宽度超过 wrapper 元素的高度／宽度。而且，如果你的 content 元素含有不固定尺寸的图片，你必须在图片加载完之后，调用 refresh() 方法来确保高度计算正确。还存在一种情况是页面存在表单元素，弹出键盘之后，将页面的视口高度压缩，导致 bs 不能正常工作，依然是调用 refresh() 方法。

如何来使用refresh()函数呢

• 监听每一张图片是否加载完成, 只要有一张图片加载完成了, 执行一次refresh()
• 如何监听图片加载完成了?
  • 原生的js监听图片: img.onload = function() {}
  • Vue中监听: @load='方法'

     <img :src="goodsItem.show.img" alt="" @load="imageLoad" />
    

• 调用scroll的refresh()

this.scroll.refresh()
```

#### 也可以直接使用插件：
```better-scroll/observe-dom```

#####  使用方式：
1.直接从better-scroll导入
```javascript
import ObserveDom from "better-scroll";
```
2.如果没有安装安装的不是better-scroll
则需
```cmd
npm install @better-scroll/observe-dom
```
**使用：**
1.
```javascript
import BScroll from '@better-scroll/core'
import ObserveDom from '@better-scroll/observe-dom'
BScroll.use(ObserveDom)

const wrapper = new BScroll('.wrapper', {
  observeDOM: true
})
```
2.
```javascript
import BScroll from "better-scroll";
import ObserveDom from "better-scroll";
BScroll.use(ObserveDom);
export default {
  name: "Scroll",
  data() {
    return {
      scroll: null,
    };
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      observeDOM: true,
    });
  },
};
```