当前位置:首页 > 前端开发 > 微信小程序 > 正文内容

[微信小程序] 获取view宽高度、获取自定义组件宽高度

Miao1年前 (2020-06-18)微信小程序976

一、获取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,这就有点坑了,不知道大家有没有遇到这样的情况???

扫描二维码推送至手机访问。

版权声明:本文由Miao发布,版权归作者所有,如需转载请注明出处。

本文地址:https://www.wmlike.com/?id=6

标签: 微信小程序
分享给朋友:

相关文章

[微信小程序] 自定义navigationBar顶部导航栏,兼容适配所有机型(附完整案例)

[微信小程序] 自定义navigationBar顶部导航栏,兼容适配所有机型(附完整案例)

前言navigationBar相信大家都不陌生把?今天我们就来说说自定义navigationBar,把它改变成我们想要的样子(搜索框+胶囊、搜索框+返回按钮+胶囊等)。 思路 隐藏原生样式获取胶囊...

[微信小程序] 开发注意事项、疑问、代码优化

[微信小程序] 开发注意事项、疑问、代码优化

在开发小程序的时候,或多或少都会遇到些问题,也有很多容易被忽略的问题;前端以提升用户体验为主,适当规避问题、优化代码可提升性能,可大大提升用户体验。 注意事项1. 自定义组件自定义组件内wx...

[微信小程序] setData函数详解及注意事项

[微信小程序] setData函数详解及注意事项

前言在微信小程序中经常会使用到setData函数把变量渲染到视图层,那么什么是setData呢?如何使用?注意事项有些什么?下面我们就来详细了解一下! 正文 setData是小程序开发中使用最频繁...

[微信小程序] 消息提示框

[微信小程序] 消息提示框

前言相比H5弹出框的实现方式要么用插件,要么自己写;微信小程序则提供了几个弹出框api,使用起来更简单、方便;每个api都有不同的使用方式、场景,今天我们就来说说小程序的几种弹出框。 目录 wx....

[微信小程序] 获取地理位置

[微信小程序] 获取地理位置

一、wx.getLocation(OBJECT)获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。开启高精度定位,接口耗时会增加,可指定highAccuracyExpireTime作为超时...

[微信小程序] 页面跳转及参数传递

[微信小程序] 页面跳转及参数传递

前言小程序的跳转方法有很多种,有的人一直只用wx.navigateTo跳转,由于页面栈限制,跳着跳着小程序就没反应了,今天就来说小程序的跳转几种跳转方式及作用。 正文一、wx.switchTab...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。