better-scroll進行簡易封裝成Vue組件

自定義組件結構

@better-scroll-vue/index.vue

template

<template>
  <div ref="wrapper">
    <slot><!-- 爲父組件提供插槽 --></slot>
  </div>
</template>

script

import BScroll from "@better-scroll/core";
export default {
  // 須要引入哪些better-scroll配置選項
  props: ["click", "scrollX", "scrollY"],
  data: () => ({
    options: { // 默認BScroll配置
    }
  }),
  mounted() { // 初始化執行
    this._initOptions()
    this._initScroll();
  },
  updated() { // 當數據更新時重計算滑動值
    this.scroll.refresh();
  },
  methods: {
    _initScroll() { // 初始化滾動條
      const { options } = this;
      const { wrapper } = this.$refs;
      if (!this.scroll) {
        // 沒有初始化滾動條時執行(一次性代碼)
        this.$nextTick(() => {
          this.scroll = new BScroll(wrapper, options);
        });
      }
    },
    _initOptions() { // 初始化props覆蓋data中的配置
      const _propsKey = Object.keys(this._props);
      // 篩選值不爲空的prop
      const props = _propsKey.reduce((total, key) => {
        if (this._props[key]) {
          total[key] = this._props[key];
        };return total;
      }, {});
      this.options = { ...this.options, ...props };
    }
  }
};

父組件中使用

test.vue

注意：要知足滾動條件，必須有個高或者寬的固定區和溢出的區域。

<template>
  <BScroll :click="true">
    <!-- 固定高寬區 -->
      <div class="content">
      <!-- 內容區(溢出區) -->
      </div>
  </BScroll>
</template>
<script>
import BScroll from './@better-scroll-vue'
export default {
  components: {BScroll} // 映射爲組件
}
</script>

若是沒法滾動

不能滾動是現象，咱們得搞清楚這其中的根本緣由。在這以前，咱們先來看一下瀏覽器的滾動原理： 瀏覽器的滾動條你們都會遇到，當頁面內容的高度超過視口高度的時候，會出現縱向滾動條；當頁面內容的寬度超過視口寬度的時候，會出現橫向滾動條。也就是當咱們的視口展現不下內容的時候，會經過滾動條的方式讓用戶滾動屏幕看到剩餘的內容。

[注意]：文檔參考官方介紹