令better-scroll更完美的封装（一）

better-scroll的功能挺强大的，虽然一开始的时候有很多bug，被戏称bug-scroll，但是该项目一直都在更新，变得越来越好。

为了防止意外，我们还是要对better-scroll封装一下，并让better-scroll更好用。

1.我个人认为滚动的内容往往都需要一个置顶按钮，所以我们在封装better-scroll时顺便给它添加一键置顶功能

2.将常用的功能函数封装起来，让我们调用组件时更高效。

首先封装一个一键置顶的组件(图片选自己喜欢的即可)

<template>
  <div class="back-top">
    <img src="~assets/common/top.png" alt="" />
  </div>
</template>
<script>
export default {
  name: "BackTop",
};
</script>
<style scoped>
.back-top {
  position: fixed;
  right: 10px;
  bottom: 60px;
}

.back-top img {
  height: 43px;
  width: 43px;
}
</style>

然后开始对better-scroll封装

<template>
  <div ref="wrapper">
    <div>
      <slot></slot>
    </div>
    <back-top
      @click.native="returnTop(backTopTime)"
      v-show="isShowBT"
    ></back-top>
  </div>
</template>

<script>
import PullUp from "@better-scroll/pull-up";
import BSscroll from "better-scroll";
import BackTop from "components/common/backtop/BackTop";

BSscroll.use(PullUp);
export default {
  name: "Scroll",
  data() {
    return {
      scroll: null,
      isShowBT: false, //用来确定置顶按钮是否出现
    };
  },
  components: {
    BackTop,
  },
  props: {
    probeType: {
      type: Number,
      default: 0,
    //0和1为不监听滚动，2为只监听手指滑动的滚动，不监听惯性滚动，3为既监听手指滑动滚动，也监听惯性滚动
    },
    click: {
      type: Boolean,
      default: true,
    //点击事件默认可运行
    },
    pullUpLoad: {
      type: Boolean,
      default: false,
      // pullUpLoad需要默认设置为false，因为新版本这个设为true后默认probetype就是3了，这样所有组件监听时刻打开
    },
    backTopTime: {
      type: Number,
      default: 400,
      // 返回顶部的时间，默认为400ms
    },
  },
  mounted() {
    //   1.创建对象
    this.scroll = new BSscroll(this.$refs.wrapper, {
      probeType: this.probeType,
      click: this.click,
      pullUpLoad: this.pullUpLoad,
      observeDOM: true,
      // 新版本如果遇到滚不动的情况，要把observeDOM设为ture
    });
    // 2.监听滚动位置
    this.scroll.on("scroll", (position) => {
      // console.log(position);
      this.$emit("scroll", position);
      this.isShowBT = position.y < -1000;
    //一般滑动1000px一键置顶按钮就该出来了，这个数值可以根据个人喜好设定，其实这个数值还可以再封装，但我觉得没必要，就直接写死了
    });
    // 3.监听上拉事件
    this.scroll.on("pullingUp", () => {
      this.$emit("pullingUp");
    });
  },
  methods: {
    //   调整到对应坐标的方法
    scrollTo(x, y, time = 400) {
      this.scroll.scrollTo(x, y, time);
    },
    //完成下拉动作
    finishPullUp() {
      this.scroll.finishPullUp();
    },
    // 直接置顶
    returnTop(t) {
      this.scroll.scrollTo(0, 0, t);
    },
    //刷新content高度
    refresh() {
      this.scroll && this.scroll.refresh();
    },
  },
};
</script>
<style scoped>
</style>

对于每一个常用功能和方法都在备注上标明了