项目中better-scroll的常用配置、插件介绍

文章目录

  • 介绍
    • 最常见的应用场景是列表滚动
    • 滚动原理
  • 安装
    • 全部安装
    • 按需安装(推荐)
  • 插件
    • 使用插件
    • 常用插件
      • pullUp
      • observe-dom
      • observe-image
  • 常用配置项
    • click
    • probeType
  • 常用注意事项
    • 在vue中使用建议用ref属性绑定scroll对象

介绍

  • BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。

  • 它的核心是借鉴的 iscroll (opens new window)的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

  • BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。

最常见的应用场景是列表滚动

<div class="wrapper">
  <ul class="content">
    <li>...li>
    <li>...li>
    ...
  ul>
  
div>
  • 上面的代码中 BetterScroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。

  • 注意:BetterScroll 默认处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略

滚动原理

  • 浏览器的滚动条大家都会遇到,当页面内容的高度超过视口高度的时候,会出现纵向滚动条;

  • 当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。

  • 也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

  • BetterScroll 也是一样的原理,我们可以用一张图更直观的感受一下:

项目中better-scroll的常用配置、插件介绍_第1张图片

  • 绿色部分为 wrapper,也就是父容器,它会有固定的高度

  • 黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。

  • 那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 BetterScroll 的滚动原理。

安装

全部安装

我们可以通过以下方式安装具备所有插件能力的 BetterScroll:

npm install better-scroll --save

如果你觉得一个个引入插件很费事,我们提供了一个拥有全部插件能力的 BetterScroll 包。

它的使用方式与 1.0 版本一模一样,但是体积会相对大很多,推荐按需引入

按需安装(推荐)

  • 如果你只需要一个拥有基础滚动能力的列表,只需要引入 core。
  • 在 BetterScroll 2.0 的设计当中,我们抽象了核心滚动部分,它作为 BetterScroll 的最小使用单元,压缩体积比 1.0 小了将近三分之一,往往你可能只需要完成一个纯粹的滚动需求,那么你只需要引入这一个库,方式如下:
import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {
     
  // ...... 详见配置项
})
  • 如果你需要一些额外的 feature。比如 pull-up,你需要引入额外的插件,详情查看插件。
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'

// 注册插件
BScroll.use(Pullup)

let bs = new BScroll('.wrapper', {
     
  probeType: 3,
  pullUpLoad: true
})

插件

使用插件

通过全局方法 BScroll.use() 使用插件。它需要在你调用 new BScroll() 之前完成:

  import BScroll from '@better-scroll/core'
  import Plugin from 'somewhere'

  BScroll.use(Plugin)
  new BScroll('.wrapper', {
     
    pluginKey: {
     } // pluginKey 对应 Plugin 类上静态属性 pluginName 的值,否则插件无法实例化
  })

常用插件

pullUp

pullup 插件为 BetterScroll 扩展上拉加载的能力。

  • 安装
npm install @better-scroll/pull-up --save
  • 使用
  import BScroll from '@better-scroll/core'
  import Pullup from '@better-scroll/pull-up'

  BScroll.use(Pullup)
  • 配置
this.scroll = new BScroll('.bs-wrapper', {
     
    pullUpLoad: true
  })
  • 事件

  • pullingUp

  • 参数:无

  • 触发时机:当距离滚动到底部小于 threshold 值时,触发一次 pullingUp 事件。

当 threshold 为正数,代表距离滚动边界 threshold 像素的时候触发 pullingUp,反之,代表越过滚动边界才会触发事件

警告

监测到上拉刷新的动作之后,pullingUp 事件的消费机会只有一次,因此你需要调用 finishPullUp() 来告诉 BetterScroll 来提供下一次 pullingUp 事件的消费机会。

  • 一般用来完成上拉加载功能。
this.scroll.on('pullingUp', () => {
     
      ...
})

observe-dom

开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后,当这些 DOM 元素发生变化时,将会触发 scroll 的 refresh 方法。 observe-dom 插件具有以下几个特性:

  • 针对改变频繁的 CSS 属性,增加 debounce

  • 如果改变发生在 scroll 动画过程中,则不会触发 refresh

  • 安装

npm install @better-scroll/observe-dom --save
  • 使用
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
BScroll.use(ObserveDOM)

new BScroll('.bs-wrapper', {
     
  //...
  observeDOM: true // 开启 observe-dom 插件
})
  • 注意:无法探测到 img 标签的是否加载完成,需要observe-image插件

observe-image

一般情况下,我们请求图片数据还没有到达,可滚动尺寸却被确定了,此时可滚动尺寸小于实际的高度,需要刷新可滚动尺寸,就需要用到该插件。(有防抖功能)

  • 开启对 wrapper 子元素中图片元素的加载的探测。无论图片的加载成功与否,都会自动调用 BetterScroll 的 refresh 方法来重新计算可滚动的宽度或者高度,新增于 v2.1.0 版本。

  • 提示:对于已经用 CSS 确定图片宽高的场景,不应该使用该插件,因为每次调用 refresh 对性能会有影响。只有在图片的宽度或者高度不确定的情况下,你才需要它。

  • 安装

npm install @better-scroll/observe-dom --save
  • 使用
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
BScroll.use(ObserveDOM)

new BScroll('.bs-wrapper', {
     
  //...
  observeDOM: true // 开启 observe-dom 插件
})
  • observeImage 选项对象:

  • 提示:当 observeImage 配置为 true 的时候,插件内部使用的是默认的插件选项对象。

const bs = new BScroll('.wrapper', {
     
  observeImage: true
})

// 相当于

const bs = new BScroll('.wrapper', {
     
  observeImage: {
     
    debounceTime: 100 // ms
  }
})
  • debounceTime

  • 类型: number

  • 默认值: 100

    探测到图片加载成功或者失败后,过 debounceTime 毫秒后才会调用 refresh 方法,重新计算可滚动的高度或者宽度,如果在 debounceTime 毫秒内有多张图片加载成功或者失败,只会调用一次 refresh

    提示:当 debounceTime 为 0 的时候,会立马调用 refresh 方法,而不是使用 setTimeout

常用配置项

click

  • 类型boolean

  • 默认值false

  • 作用:BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true,BetterScroll 会派发一个 click 事件,我们会给派发的 event 参数加一个私有属性 _constructed,值为 true。

  • 一般我们需要将click设置为true。

probeType

  • 类型number
  • 默认值0
  • 可选值1|2|3
  • 作用:决定是否派发 scroll 事件,对页面的性能有影响,尤其是在 useTransition 为 true 的模式下。
// 派发 scroll 的场景分为两种:
// 1. 手指作用在滚动区域(content DOM)上;
// 2. 调用 scrollTo 方法或者触发 momentum 滚动动画(其实底层还是调用 scrollTo 方法)

// 对于 v2.1.0 版本,对 probeType 做了一次统一

// 1. probeType 为 0,在任何时候都不派发 scroll 事件,
// 2. probeType 为 1,仅仅当手指按在滚动区域上,每隔 momentumLimitTime 毫秒派发一次 scroll 事件,
// 3. probeType 为 2,仅仅当手指按在滚动区域上,一直派发 scroll 事件,
// 4. probeType 为 3,任何时候都派发 scroll 事件,包括调用 scrollTo 或者触发 momentum 滚动动画

常用注意事项

在vue中使用建议用ref属性绑定scroll对象

  • 如果在大型项目中有多处使用wrapper作为类名称,那么querySelecter会选择第一个。
  • 但是使用ref属性可以精确定位到我们选择的element元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pR9nQ8kN-1613031372576)(/Users/mac/Desktop/前端学习笔记/vue/better-scroll的使用/2.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCQESkGY-1613031372579)(/Users/mac/Desktop/前端学习笔记/vue/better-scroll的使用/3.jpg)]

你可能感兴趣的:(项目中better-scroll的常用配置、插件介绍)