小程序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/

你可能感兴趣的文章