微信小程序(五) 节点侦听 | wx.createIntersectionObserver

建议以代码段的方式查看，查看实时调试结果可能会更快的理解这个东西

代码段地址：微信开发者工具 | 代码片段

index.wxml

<view class="fixed-wrap" id="fixed-wrap">
  <view
    id="fixed-content"
    class="fixed-box {{ isFixed ? 'stick' : '' }}"
    data-text="自定义添加的文字"
    data-id="{{ identifier }}"
  >
    <text>{{ isFixed ? '吸顶啦' : '元素滑动至tab栏时吸顶' }}</text>
  </view>
</view>

index.js

Page({
  data: {
    // 给固定定位元素添加的自定义标识
    identifier: new Date().getTime(),
    isFixed: false
  },

  onLoad() {
    // 页面渲染要很久并且高度不固定的情况下，用这个比较稳定
    this.onElementLinstener();
  },
  /**
   * 同样以吸顶功能为需求，做一个节点侦听器版本的吸顶功能，借此过程可以根据调试结果更好的熟悉api的使用
   * 即使看过文档，查过一些大佬的使用案例和说明也一样是有点懵，索性新建了个代码片段去尝试，不停的调试查看打印数据，终于完成了需求
   * 想给用到这个API的各位说一下，因为是在项目结束后才有时间去总结这些，所以使用时候踩的坑和迷惑的地方可能没办法全部描述出来，所以即使看过它，也只是看了个和官方文档差不多的一个例子而已，还是需要自己写demo去查看不同状态下的打印数据。
   * 多去尝试，敢于试错
   */
  // 元素观察器
  onElementLinstener () {
    wx.setNavigationBarTitle({ title: '元素观察器' })
    // 获取系统信息 statusBarHeight为状态栏高度
    const { statusBarHeight } = wx.getSystemInfoSync();
    // 创建节点侦查器
    const createIntersectionObserver = wx.createIntersectionObserver(this);
    // 可以链式调用，这里是为了写备注方便点
    /**
     * 调用 relativeToViewport() 去指定页面显示区域作为参照
     * 假定 statusBarHeight 的值为 20 ，那么下边的代码就是选择了距离顶部 64像素(模拟导航栏高度) 的地方，就像页面的一条横截线一样
     * observe() 的第一个参数指定的元素达到所选的参照区域，则侦听器触发回调
     */
    createIntersectionObserver.relativeToViewport({ top: -(statusBarHeight + 44) });
    // 指定要侦测的元素为 '#fixed-wrap' , ← 为包裹固定元素的容器而不是固定元素
    createIntersectionObserver.observe('#fixed-wrap', res => {
      const { boundingClientRect, intersectionRect } = res;
      // boundingClientRect - 目标边界相对于页面的情况
      // clientTop 为与目标相去的高度，当它为负值的时候则说明元素已经过了我们所设置监听的那个高度
      const { top: clientTop } = boundingClientRect;
      // intersectionRect - 与目标相交的区域 上下左右.. 单位px 因为这里指定的是页面的一条横截线，所以无所谓上下左右
      // top 为观察元素相对于页面的高度
      const { top } = intersectionRect;
      if (clientTop <= 0 && top === 0) {
        this.setData({ isFixed: true });
        return;
      }
      this.setData({ isFixed: false });
    });
  },
})

参考链接：微信官方文档 | IntersectionObserver