better-scroll进行简易封装成Vue组件

最新推荐文章于 2023-03-01 17:34:44 发布

Mr_maoEr

最新推荐文章于 2023-03-01 17:34:44 发布

阅读量193

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/leg_hair_king/article/details/105321742

版权

本文详细介绍了如何将better-scroll库封装为Vue组件，包括创建接口、模板设置、脚本配置以及在父组件中的应用。同时，强调了确保滚动功能正常所需的条件——存在固定高度或宽度的区域及溢出内容。对于遇到无法滚动的问题，文章指出应首先理解浏览器滚动原理，即当内容尺寸超过视口时，滚动条才会出现。

摘要由CSDN通过智能技术生成

创建接口

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

父组件中使用

**注意：**要满足滚动条件，必须有个高或者宽的固定区和溢出的区域。

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

如果无法滚动

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