在vue中better-scroll的用法以及不能滑动的原因

一.用法

1.首先要安装better-scroll：
npm install better-scroll --save
然后在项目中引入它：
import BScroll from ‘better-scroll’
2.使用
html:

<template>
  <div class="content">
    <div class="left"  ref="left">//滑动的外层容器
      <ul>//滑动包含的内容
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </div>
</template>

js:

<script>
import BScroll from 'better-scroll';
export default {
  data () {
    return {};
  },
  mounted () { //BScroll的实例化要放在mounted里面，要保证在dom节点挂载后再实例化
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.left, {
        click: true
      });
      console.log(this.scroll);
    });
  }
};
</script>

css：
这里要对css进行设置

<style scoped>
.content {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.left {
  width: 30%;
  height: 100%;
}
</style>

二.better-scroll不能滚动检查原因：

1.是否是因为better-scroll没有引入成功
2.是否是在mounted里面实例化
3.滑动内容的高度是否大于外层的高度（通过审查元素console.log(this.scroll)，看是否wrapperHeight< scrollHeight，hasVerticalScroll为true；那如果这些数据不对，检查是否dom没有更新完就初始化BScroll了，要等dom更新完才能初始化）
4.是否正确的设置css：.content, .left等等