知道disable是幹什麽的了，如果不加，scroll的高度會高於內容的高度。

<template>  
  <div ref="wrapper">  
    <slot></slot>  
  </div>  
</template>  
  
<script>  
import BScroll from ‘better-scroll‘  
export default {  
  props: {  
    // probeType: 1 滾動的時候會派發scroll事件，會截流。2滾動的時候實時派發scroll事件，不會截流。 3除了實時派發scroll事件，在swipe的情況下仍然能實時派發scroll事件  
 

    probeType: {  
      type: Number,  
      default: 1  
    },  
    // click: true 是否派發click事件，通常判斷瀏覽器派發的click還是betterscroll派發的click，可以用event._constructed，若是bs派發的則為true  
    click: {  
      type: Boolean,  
      default: true  
    },  
    data: {  
      type: Array,  
      default: null  
    }  
  },  
  mounted () {  
    setTimeout(() 
 
=> {  
      this._initScroll()  
    }, 20)  
  },  
  methods: {  
    _initScroll () {  
      if (!this.$refs.wrapper) {  
        return  
      }  
      this.scroll = new BScroll(this.$refs.wrapper, {  
        probeType: this.probeType,  
        click: this.click  
      })  
    },  
    enable () {  
      
 
// 啟用 better-scroll，默認開啟  
      this.scroll && this.scroll.enable()  
    },  
    // disable () {  
    //   // 禁用 better-scroll  
    //   this.scroll && this.scroll.disable()  
    // },  
    refresh () {  
      // 強制 scroll 重新計算，當 better-scroll 中的元素發生變化的時候調用此方法  
      this.scroll && this.scroll.refresh()  
    }  
  },  
  watch: {  
    data () {  
      setTimeout(() => {  
        this.refresh()  
      }, 20)  
    }  
  }  
}  
</script>  
  
<style scoped>  
  
</style>  

使用如下：

優化：

vue慕課網音樂項目手記：9-封裝一個公用的scroll組件