Uniapp的API：uni.createIntersectionObserver()之$el.querySelector is not a function报错问题解决

Uniapp+vue3场景下，开发需求要得到某el节点到视口顶部的距离，从而使用该API：(项目需求封装进了promise）

//获取节点距离顶部的高度
export function getTabsTop(el) { //el:节点
	return new Promise((resolve, reject) => {
		let observer = uni.createIntersectionObserver(this)	//创建并返回一个 IntersectionObserver 对象实例
		observer.relativeToViewport().observe(el, (res) => {
			resolve(res.boundingClientRect.top)//得到该el节点到视口顶部的距离
		})
	})
}

但是写好后，控制台却报错：TypeError: $el.querySelector is not a function

大概意思是没有获取到当前的el节点，针对这个问题排查了许多地方，最后终于确定了症结所在：

1.因为开发环境是vue3,个人没有对这个组件的模板设置一个根节点，使用该API一定要对所有的元素设置一个根节点！否则该API无法获取到el节点！

<!-- 在这设置根节点包裹所有节点 -->
<view class="box">
		<view class="top" >
		</view>
		<view class="bottom">
		</view>
</view>

2.请注意延迟创建uni.createIntersectionObserver()，也就是在页面加载完成后触发。

我的代码中是利用监听滚动来延迟触发：

//监听页面滚动
onPageScroll(()=>{
    //调用api
	getTabsTop('.tabs').then(res => {
		console.log(res);//输出top值
	})
}) 

满足二者条件，$el.querySelector is not a function这个报错就不复存在了~