BetterScroll 2.0

# observe-image 2.1.0

# 介绍

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

提示

对于已经用 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 插件
  })

# 示例

<template>
  <div class="observe-image-container">
    <div class="scroll-wrapper" ref="scroll">
      <div class="scroll-content">
        <img width="100%" v-for="(url, index) in images" :src="url" alt="" :key="index">
      </div>
    </div>
  </div>
</template>

# 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。

← pulldown →