在 vue 中简单封装 better-scroll 并使用

better-scroll

  官网链接
  better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

  better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。

安装

better-scroll 托管在 Npm 上，执行如下命令安装：

npm install better-scroll --save

封装

创建一个 Scroll.vue 文件用来封装 better-scroll

<template>
  <div ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
    
  name: "Scroll",
  props: {
    
    probeType: {
    		//派发 scroll 事件
      type: Number,
      default: 0
    },
    pullUpLoad: {
    		//开启上拉加载
      type: Boolean,
      default: false
    }
  },
  data()