uniapp在小程序中使用createIntersectionObserver的问题

前言

之所以是用这个Api，主要是为了优化项目。这个不光是可以用来实现图片的懒加载，还特别契合用于项目中的埋点。

优化之前：在页面加载以后获取元素节点的位置+滚动方式来做的。缺点显而易见，代码量比较多，而且监听scroll滚动官方也不推荐，非常影响性能。

优化之后:统一封装Class类，全局统一存储并处理createIntersectionObserver的监听。封装以后可以实现，横向滚动以及竖向滚动到可视区内都可以做到精准埋点。

使用方法

options的三个属性：

• thresholds：是一个数组，比如你可以设置[0.2，0.5,1]那么在视口区域相交部分达到20%、50%、100%都会触发监听。
• initialRatio：默认是0，这个参数基本不用改动的。
• observeAll：这个属性主要是用来监听多个类名一样的数据

  IntersectionObserver 4个的方法

  • relativeTo：以你选中的节点作为容器区域，并根据你传入的节点类名进行监听，当传入的类名出现在容器内就会触发。
  • relativeToViewport：以你传入的选择器节点只要出现在视口区域就会触发监听。
  • observe：传入需要监听的类名，回调函数 callback 包含一个参数 result
  • disconnect：取消监听，隐藏或者卸载可取消监听。

    vue3-代码示例

    vue3中因为没有this，使用getCurrentInstance()

    代码封装：

    class ScrollObserver {    #instance;    #listeners;    constructor() {        this.#instance = getCurrentInstance();        this.#listeners = {};    }    static createObserver(selector, thresholds, observeAll = false) {        // 存在已经有的类名，则会报错，需要先取消监听        if (this.#listeners[selector]) this.#listeners[selector].disconnect();        this.#listeners[selector] = uni.createIntersectionObserver(this.#instance, {            thresholds,            observeAll,        });        return this.#listeners[selector];    }    on(selector,callback,observeAll = false) {    // 这里的监听[]可根据业务情况自行调整，监听满足条件是会重复触发        this.constructor.createObserver(selector, [0, 0.2, 1], observeAll)            .relativeToViewport({ right: 10 })            .observe(selector, (res) => {                callback(res);            });    }    // 取消    off(selector){        if (!this.#listeners[selector]) return        this.#listeners[selector].disconnect();        Reflect.deleteProperty(this.#listeners, selector);    }}

    margins： 用来扩展（或收缩）参照节点布局区域的边界

    这里margin我是用的，{ right: 10 }。按照正常理解应该是当元素滑动到可视区域bottom以下才对，不过这个bottom是距离下边界的距离，相当于还是在元素内部。实际开发也可以修改参数进行微调测试。

    使用示例：

    // 实例化对象const emitter = new ScrollObserver();

    emitter.on('.example', (res) => {     if (res.intersectionRatio === 1) {// 业务代码 }     if (res.intersectionRatio === 0) {// 业务代码} });

    存在的问题

    • 微信小程序:可以使用scss >>> 穿透语法实现组件的类名监听
    • 支付宝小程序：不可以使用 >>>，目前没有更好的办法兼容，官方推荐使用this.createIntersectionObserver，不过vue3并没有this。
    • 对已存在监听的类名，方法会抛出错误，需要先取消监听，然后再重新创建。
    • 页面的onhide或者onshow以后，虽然是出现在了当前可视区域，这种情况是没有触发监听的。

      总结

      在小程序开发中，使用这个Api来实现埋点的数据上报，基本是相当精准的，而且不会对性能造成影响。