浅谈微信小程序列表埋点曝光指南
背景
最近项目中,开发一个小程序列表页,PM大大给我提了一个埋点需求,列表中的每一项,出现在屏幕中的时候,需要上报一条记录。
目标
结论
- 类似这样的埋点,我们以后可以采用监听dom的方式去做,而不是一昧的只想着监听滚动计算位置。
- 除了可以做埋点上报,这种监听的方式,还是很适合去做一些图片懒加载等一系列操作。
联想
上述的所有操作,都是基于微信小程序去做的,那么浏览器有没有相应的API呢?
浏览器是有相应的API的, Intersection Observer API ,具体的用法与上述的用法类似。
var options = { rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver((...args) => { console.log(args); }, options); observer.observe(document.querySelector('.item'));
注意这个会监测dom元素的可见性变化,也就是说当dom出现在视窗的时候会触发回调,消失在视窗的时候也会触发回调
但是浏览器的 IntersectionObserver 属性兼容性一般,如果想要在浏览器做曝光或者懒加载可以考虑采用原始的方法,监听浏览器滚动,并计算dom的offsetTop,可以参考笔者很久前写的 图片延时 加载原理 及应用
参考文档
谈谈IntersectionObserver懒加载
微信小程序IntersectionObserver 文档
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持来客网。