vue封装better-scroll（iscroll）组件-优快云博客

本文详细介绍如何使用vue-cli创建项目，并通过better-scroll实现自定义滚动组件。从安装配置到组件封装，再到实际应用，全面解析滚动效果的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 使用vue-cli脚手架创建vue项目
2. 在项目的根目录下使用 npm i better-scroll -S 命令安装better-scroll
3. 创建 app-scroll.vue 文件

<template>
<div class="app-scroll" ref="scroll">
  <div class="scoll-wrap">
    <slot/>
  </div>
</div>
</template>

<script>
//导入better-scroll
import BScroll from 'better-scroll'
export default {
  name: 'app-scroll',
  mounted(){
    // 创建滚动视图
    this.scroll = new BScroll(this.$refs.scroll, {
      tap: true,
      click: true
    });
    // 如果需要滚动，先刷新滚动视图，就可以在可滚动范围内滚动
    this.scroll.on('beforeScrollStart', ()=>{
      this.scroll.refresh();
    });
  }
};
</script>

<style scoped>
.app-scroll{
  overflow: hidden;
}
</style>

4. 使用app-scroll组件

如果定义全局组件，那样就可以在任何地方直接使用
如果不是，则需要先引入该组件再使用

  <app-scroll class="content">
    <!-- 滚动的内容 -->
  </app-scroll>

注意：在引用app-scroll组件时，需要给该组件设置宽高。

iscroll的封装与better-scroll的封装是一样的，所有步骤中把better-scroll换成iscroll即可