优化h5的滚动功能：在vue和react中使用better-sroll插件的踩坑笔记

前言

最近在开发公司网站项目的h5版本，技术栈是vue，为了更好的优化滚动效果，以及实现一些相关的功能，就选择使用better-scroll这个插件。觉得效果很不错，我又在自己写着玩的博客中集成了这个插件。

使用经验

安装（推荐安装core版本按需引入插件）

yarn add @better-scroll/core

在vue中的使用

封装一个滚动组件Scroll.vue

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

<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      bs: "",
      positionY:0
    };
  },
  props: {},
  mounted() {
    this.bs = new BScroll(this.$refs.wrapper, {
      click: true,
      observeDOM: true,
      observeImage: true,
      scrollX: false,
      probeType: 3,
      useTransition: false,