vue 使用Better－Scroll

 注意点

1. 外层容器wrapper要设置高度，并且overflow:hidden。

2. wrapper里面的需要一个div包裹所有内容

3. 样式成功

4. 

以上就是可以滚动的情况，wrapperHeight(616) < scrollHeight(750)，hasVerticalScroll为true；

 

<template>
  <div class="home">
    <!--定义外层-->
    <div class="wrapper" ref="wrapper">
        <!--定义需要滚动的内容区域-->
        <ul class="content">
            <li v-for="(item,index) in 50" :key="index">hello world hello world</li>
        </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'Home',
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {})
      console.log(this.scroll)
    })
  }
}
</script>

<style>
.wrapper{
  position: absolute;
  left: 0;
  top: 40px;
  overflow: hidden;
  height: 500px;
}
</style>

 

参考资料

https://blog.csdn.net/qiqi_77_/article/details/79361413

https://blog.csdn.net/qq_36457584/article/details/80856158