vue better-scoll使用

转载于https://blog.csdn.net/qiqi_77_/article/details/79361413

<template>
  <div class='outer-wrapper' v-loading="loading" ref="outer_wrapper">
      <div>
        <div v-for="item,index in data_list"
            :key="index"
            :label="index"
            :value="index"></div>
      </div>
  </div>
</template>

<script>

  import BetterScroll from 'better-scroll';

  export default {
    components: {
      BetterScroll,
    },
    data() {
      return {
        loading:false,
        scroll:null,
        data_list:[],
      }
    },
    methods: {
    },
    mounted() {
      this.scroll = new BetterScroll(this.$refs.outer_wrapper, {click:true, tap:true});
    }
  }
</script>
<style lang='less'>
  .outer-wrapper{
    height: 100vh;
    position: relative;
  }
</style>

如代码所示，需要滚动的内容需要被两层div套起来，外面的div高度固定，小于等于屏幕高度，如果你希望滚动的区域只是屏幕中的局部区域，则外层div的高度将会更小。内层div高度必须大于外层div的高度，才可以滚动。

你可以console.log(this.scroll)查看betterscroll实例对象的内容，当hasVerticalScroll为true,scrollHeight>wrapperHeight的时候才能滚动。