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

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

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

一、获取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

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

相关文章

[微信小程序] 单张、多张图片上传(图片转base64格式)实践经验

[微信小程序] 单张、多张图片上传(图片转base64格式)实践经验

定义初始数据: data: { imgList: [], // 图片集合 baseImg: [], // base64图片集合 maxImg: 8, // 图片上传最高...

[微信小程序] 参数传递与路径获取

[微信小程序] 参数传递与路径获取

首先在小程序中,所有页面的路由都由框架统一管理。getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。 // 获取加载...

[微信小程序]设置缓存过期时间

因为小程序缓存没有说明具体清除时间,所以我们就得自己设置过期时间对缓存进行清理,以达到我们的业务场景,方便使用。 // 获取缓存的过期时间 let clearTime = wx.getStorag...

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

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

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

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

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

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

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

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

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

发表评论

访客

看不清,换一张

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