小程序IntersectionObserver接口技术文档

##兼容性

###基础信息

文档：基础库 > 1.9.3 -兼容：支持基础库版本较高的版本

observeAll：基础库 > 2.0.0

##API

###创建实例通过wx.createIntersectionObserver(Object this, Object options)创建IntersectionObserver实例，options可选配置参数包括：

thresholds：触发阈值的集合数组，默认值为 [0]。例如，设置为 [0, 0.5, 0.8]，则当监听对象与参照物相交比例达到 0 / 0.5 / 0.8 时会触发监听器回调。

initialRatio：初始相交比例，默认值为 0。当达到 initialRatio 或 thresholds 中的阈值时，回调会被触发。

observeAll：是否同时监听多个对象，默认值为 false。此参数在基础库版本 > 2.0.0 时有效。

###核心方法

disconnect：停止监听。

observe：指定监听对象并设置回调函数。

.observe(string targetSelector, function callback)

相关属性：

intersectionRatio：相交比例，用于判断临界点。

intersectionRect：相交区域的边界，包含 left、right、top、bottom 属性。

boundingClientRect：目标边界，包含 left、right、top、bottom 属性。

relativeRect：参照区域的边界，包含 left、right、top、bottom 属性。

time：相交检测时的时间戳。

###参考方法

relativeTo：指定参照区域之一。

.relativeTo(string selector, Object margins)

margins 包含 left、right、top、bottom 属性，可设置与某一边界的达到一定距离时触发回调。

relativeToViewport：指定页面显示区域作为参照区域之一。

.relativeToViewport(Object margins)

##案例

###列表数据监控场景：统计用户浏览商品列表时的行为数据。

interSection: function (e) {
  if (this._observer) {
    this._observer.disconnect()
  }
  this._observer = this.createIntersectionObserver({
    thresholds: [1],
    observeAll: true
  })
  .relativeToViewport({
    bottom: 0
  })
  .observe('.item', (item) => {
    const idx = item.dataset.idx
    if (idx > this.data.expoIdx) {
      this.setData({
        expoIdx: idx
      })
    }
  })
}, 
getList: function() {
  this.setData({
    list: newList
  }, this.interSection)
}, 
logViewCount: function() {
  // 上报数据
  log(this.data.expoIdx)
}, 
onHide: function() {
  this.logViewCount()
}, 
onUnload() {
  if (this._observer) {
    this._observer.disconnect()
  }
}

###吸顶效果场景：通过IntersectionObserver实现小程序中的吸顶效果。

filterInterSection: function(e) {
  this.filterObserver = this.createIntersectionObserver({
    thresholds: [0, 0.5, 1]
  })
  .relativeToViewport()
  .observe('.filter-container', (data) => {
    if (data.intersectionRatio < 1) {
      this.setData({
        isFixed: true
      })
    } else {
      this.setData({
        isFixed: false
      })
    }
  })
}, 
onLoad: function(options) {
  this.filterInterSection()
}, 
onUnload() {
  if (this.filterInterSection) {
    this.filterInterSection.disconnect()
  }
}

##总结 IntersectionObserver 是小程序实现页面间距控制和可见性检测的强大工具。通过灵活配置阈值和参照区域，可以实现多种交互场景，提升用户体验。

转载地址：http://oiod.baihongyu.com/

你可能感兴趣的文章