better-scroll在vue中的使用

1.安装

npm install better-scroll -S 

2.导入

import BScroll from '@better-scroll/core'

3.使用

   （1）在你需要滑动的元素外面套两个div，最外层的加上ref注册引用信息，可以在VUE中直接操作DOM。

 <div ref="container" class="container">
    <div>
      <div class="hot">
        <div class="hot-title">热门城市</div>
        <ul class="hot-list">
          <li class="hot-item" v-for="item in hotList"> {{ item.name }}</li>
        </ul>
      </div>
    </div>
</div>

（2）在script中添加如下内容：

data(){
    return{
      scroll:''
    }
  },
  mounted() {
    let container = this.$refs['container']
    this.scroll = new BScroll(container)
  }

（3）在style中设置一下最外层的盒子(如果没有设置就无法滑动哦)：

.container{
  overflow hidden
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: .88rem;
  background: #f5f5f5
}