持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天
betterScroll的使用
BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window)的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。
文档地址： 介绍 | BetterScroll 2.0 (better-scroll.github.io)
它可以很好地帮助我们实现移动端滚动监听，顶部底部缓冲等效果，今天我在项目中就尝试使用一下，
安装
npm install @better-scroll/core --save
引入
import BScroll from '@better-scroll/core'
或者我们可以直接在线引用：
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>
<!-- minify -->
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.min.js"></script>
使用
使用一个标签包裹住要展示的内容，确保容器标签内只有一个标签：
<div id='app'>
<!--容器，容器内只有一个子标签（scroll-content）-->
<div class="wrapper" ref="scroll">
<!--内容-->
<div class="scroll-content">
<!--这里是内容-->
</div>
</div>
</div>
创建BScroll实例，将容器的对象dom实例作为参数传入，第二个参数为对象形式的配置信息
this.bs = new BScroll(this.$refs.scroll, options)//切记不要在create生命周期函数中调用，因为在那时dom刚做声明还未初始化，无法获取
我这里要实现的功能：
- 内容下拉到底后触发事件，向服务器请求后续内容
- 监听滚动的位置，实现导航栏吸顶粘黏功能
- 为项目添加更顺滑的滚动效果
用到的配置：
-
probeType----决定是否派发 scroll 事件（实时监听滚动事件），对页面的性能有影响
- probeType 为 0，在任何时候都不派发 scroll 事件，
- probeType 为 1，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件，
- probeType 为 2，仅仅当手指按在滚动区域上，一直派发 scroll 事件，
- probeType 为 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画
- bounce---- 当滚动超过边缘的时候会有一小段回弹动画。
- momentum----当快速在屏幕上滑动一段距离的时候，会根据滑动的距离和时间计算出动量，并生成滚动动画。
用到的方法：
-
on(type, fn, context)
- {string} type 事件名
- {Function} fn 回调函数
- {Object} context 函数执行的上下文环境，默认是 this
用到的插件：
-
pullup（底部上拉触发事件，实现上拉加载更多）
-
//安装 npm install @better-scroll/pull-up --save -
//引入及注册 import Pullup from '@better-scroll/pull-up' BScroll.use(Pullup) -
//实例化BScroll时传入 this.bs = new BScroll('.wrapper', { pullUpLoad: true }) -
//结合on方法使用 this.bscroll.on('pullingUp', ()=>{ //dosth })
-
注意，这里之所以使用ref获取dom对象，是为了防止通过document方法获取时不慎获取到与其他组件中同名的元素
补充：ref的用法
ref绑定在组件上，通过this.$refs.refname获取到该组件对象
ref绑定在普通标签元素上，通过this.$refs.refname获取到该元素对象
这样即使其他组件中有ref同名组件或元素，通过this拿到的也一定是当前组件的ref标签
