uniapp开发的时候,可能会有获取dom节点信息的需求,在uniapp的vue2.X编译模式中可以直接通过API const query = uni.createSelectorQuery().in(this);去获取相关的节点信息。在vue3.2+中这段代码是会报如下错误:

image

原因分析:

其实从这个错误是看不出什么原因,于是进一步思索。我们知道vue2.x中是在uni.createSelectorQuery()后缀了.in(this),但是在vue3.x的<script setup></setup>中的this就不好使了,压根儿就没有this这个东西了,所以报错大概就是这个this惹的祸,接下来做个验证。

验证分析:**

直接把代码中的.in(this)去掉

<template>
    <view class="myView" style="background-color: pink;" id="myView">我是方脑壳</view>
</template>
<script setup>
	const query = uni.createSelectorQuery();
	query.select('#myView').boundingClientRect(data => {
		console.log("得到布局位置信息:",data);
	}).exec();
</script>
<style>
	.myView {
		width: 100px;
		height: 100px;
	}
</style>
结果分析

上面验证中的打印结果:

{
    bottom: 121,
    dataset: {},
    height: 100,
    id: "myView",
    left: 0,
    right: 100,
    top: 21,
    width: 100
}

没有报错,而且打印出了正确的结果,证明原因分析是没问题的。只是在uniapp的官方API中还没有做相关的说明,所以可能一开始会进入误区导致有些功能不能实现。

所以在uniapp的vue3.2+开发中,获取节点信息等相关API要记得抛弃this,避免走弯路。

----- 看完啦别忘记点赞哟,您的肯定就是对我最大的支持 END -----

关注我,不迷路

如果任何疑问的可以在评论区留言,还可以加QQ群交流:568984539,加群备注‘地区-名字-技术类型’。

更多前端等相关知识可关注我个人博客:https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

个人作品收藏:https://mp.weixin.qq.com/s/8hZjCRfjcFuSk-YRzRUn6g

Logo

前往低代码交流专区

更多推荐