自定义组件结构

@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>

如果无法滚动

不能滚动是现象,我们得搞清楚这其中的根本原因。在这之前,我们先来看一下浏览器的滚动原理: 浏览器的滚动条大家都会遇到,当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

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

Scroll Up