plugins/observe-image

优质
小牛编辑
137浏览
2023-12-01

介绍

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

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

安装

npm install @better-scroll/observe-image --save

// or

yarn add @better-scroll/observe-image

使用

  import BScroll from '@better-scroll/core'
  import ObserveImage from '@better-scroll/observe-image'
  BScroll.use(ObserveImage)

  new BScroll('.bs-wrapper', {
    //...
    observeImage: true // 开启 observe-image 插件
  })

示例

<<< @/examples/vue/components/observe-image/default.vue?template <<< @/examples/vue/components/observe-image/default.vue?script <<< @/examples/vue/components/observe-image/default.vue?style

observeImage 选项对象

:::tip 提示 当 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

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