taro3 微信小程序 createIntersectionObserver 监听无效-Toy模板网

这篇具有很好参考价值的文章主要介绍了taro3 微信小程序 createIntersectionObserver 监听无效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目： taro3 + vue3

官方文档

版本：3.x
Taro.createIntersectionObserver(component, options)
创建并返回一个 IntersectionObserver 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createIntersectionObserver([options]) 来代替。

支持情况：微信小程序抖音小程序 H5 React Native Harmony

类型
(component: TaroGeneral.IAnyObject, options?: Option) => IntersectionObserver

参数
参数类型说明
component TaroGeneral.IAnyObject 自定义组件实例
options Option 选项
Option
选项

参数类型必填说明
initialRatio number 否初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数。
observeAll boolean 否是否同时观测多个目标节点（而非一个），如果设为 true ，observe 的 targetSelector 将选中多个节点（注意：同时选中过多节点将影响渲染性能）
thresholds number[] 否一个数值数组，包含所有阈值。

方法

relativeToViewport — 页面作为显示区域

relativeTo — 指定的容器作为区域

observe — 监听的节点

disconnect — 停止监听

官方示例

Taro.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
  res.intersectionRatio // 相交区域占目标节点的布局区域的比例
  res.intersectionRect // 相交区域
  res.intersectionRect.left // 相交区域的左边界坐标
  res.intersectionRect.top // 相交区域的上边界坐标
  res.intersectionRect.width // 相交区域的宽度
  res.intersectionRect.height // 相交区域的高度
})