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>

若是没法滚动

不能滚动是现象，咱们得搞清楚这其中的根本缘由。在这以前，咱们先来看一下浏览器的滚动原理： 浏览器的滚动条你们都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当咱们的视口展现不下内容的时候，会经过滚动条的方式让用户滚动屏幕看到剩余的内容。

[注意]：文档参考官方介绍