获取view宽高度、获取自定义组件宽高度

一、获取view宽高度

给view设置一个id(class)名,用法和jQuery类似,用来获取指定id相关信息。

<view id="test">测试view</view>

把方法写在onReady,是为了再页面初次渲染完成后,再去获取,避免不准确或获取不到的情况。

onReady: function (e) {
	const query = wx.createSelectorQuery();
	query.select('#test').boundingClientRect(function (res) {
		console.log(res)
	}).exec()
}

输出结果:
在这里插入图片描述

二、获取自定义组件宽高度

获取自定义组件的相关信息,与获取view信息基本一致,只需要把const query = wx.createSelectorQuery()替换成const query = wx.createSelectorQuery().in(this)就可以了。

const query = wx.createSelectorQuery().in(this);
query.select('#test').boundingClientRect(function (res) {
	console.log(res)
}).exec()

但是在实际使用的时候,却发现一个问题,这样是能获取到组件的相关信息,但是高度却和实际的有误差:
在这里插入图片描述
如图,获取到组件高度为603,而实际#test组件高度为160,这就有点坑了,不知道大家有没有遇到这样的情况???

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

FaxMiao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值