vue使用 Scroller组件

Vue 中可以使用第三方库 Better-Scroll 实现滚动效果，而 Scroller 组件是 Better-Scroll 库的一个封装，可以更方便地在 Vue 中使用 Better-Scroll。

下面是一个简单的 Scroller 组件的示例：

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <!-- 这里是滚动内容 -->
    </div>
  </div>
</template>

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

export default {
  mounted() {
    this.initScroll();
  },
  methods: {
    initScroll() {
      this.scroll = new BScroll(this.$refs.wrapper, {
        // 这里可以设置 Better-Scroll 的配置项
      });
    }
  },
  beforeDestroy() {
    this.scroll.destroy();
  }
};
</script>

<style>
.wrapper {
  height: 200px;
  overflow: hidden;
}

.content {
  /* 这里是内容的样式 */
}
</style>

在上面的代码中，我们首先创建了一个 Scroller 组件，它包含了一个滚动内容的区域和一个包裹滚动内容的容器。在 mounted 钩子函数中，我们调用了 initScroll 方法来初始化 Better-Scroll 实例，并且将容器元素作为第一个参数传入。在 initScroll 方法中，我们可以设置 Better-Scroll 的配置项，比如滚动方向、滚动条样式、滚动事件等等。在 beforeDestroy 钩子函数中，我们销毁了 Better-Scroll 实例，以防止内存泄漏。

需要注意的是，Scroller 组件的容器元素必须要有一个固定的高度，并且设置 overflow 属性为 hidden，才能正常显示滚动效果。另外，在使用 Better-Scroll 时需要注意一些性能问题，比如避免频繁的调用 scroll 方法、避免在滚动时频繁修改 DOM 等等。