微信小程序 用createIntersectionObserver获取当前在 scroll-view 内的可视元素

使用 `createIntersectionObserver` 方法可以创建一个 IntersectionObserver 对象，用于观察某个节点与其祖先节点或 viewport 的交叉状态。在 scroll-view 内获取当前可视元素的步骤如下：

1. 在 wxml 文件中，给 scroll-view 组件设置一个唯一的 id，例如：

<scroll-view id="my-scroll-view" scroll-y="true">
  <!-- scroll-view 内容 -->
</scroll-view>

2. 在 js 文件中，使用 `createIntersectionObserver` 方法创建一个 IntersectionObserver 对象，并指定监听的节点为 scroll-view 组件。如下所示：

const observer = wx.createIntersectionObserver(this, {
  observeAll: true, // 是否同时观察所有节点
  thresholds: [0.5], // 相交比例阈值
});

observer.relativeTo('#my-scroll-view'); // 相对节点为 scroll-view 组件

3. 监听节点的相交状态变化。在 `relativeTo` 方法后面，可以使用 `observe` 方法监听某个节点的相交状态变化。如下所示：

observer.observe('.my-element', (res) => {
  console.log(res); // res.intersectionRatio 表示节点相交比例，res.boundingClientRect 表示节点的位置和大小等信息
});

其中，`.my-element` 为需要监听的节点的 CSS 选择器，可以是任何元素。

4. 注意事项：

- 由于 scroll-view 内的元素是动态加载的，因此需要在元素加载完成后再进行监听。可以使用 `wx.nextTick()` 方法或者 `setData()` 方法的回调函数来实现。
- 如果需要同时观察多个节点，可以在 `relativeTo` 方法中指定多个节点的 CSS 选择器，或者使用 `observeIntersection` 方法来监听所有节点的相交状态变化。