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即可
