微信小程序踩坑二，获取元素宽高数据

最新推荐文章于 2025-03-14 08:41:49 发布
原创 最新推荐文章于 2025-03-14 08:41:49 发布 · 346 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #微信小程序

在尝试获取页面模块的宽高时，遵循官方文档编写代码却无法得到数据。经过网络搜索多种解决方案无效后，发现问题出在基础库版本上。更新基础库版本后问题得到解决，但注意到官方文档对此版本要求的说明不够清晰，提醒开发者遇到类似问题时要考虑版本兼容性。

今天打算获取页面某个宽高的信息，完全按照根据官方文档的方式写了代码，但问题是无论如何都获取不到模块数据。

还各种网上百度谷歌，尝试了各种方法。发现依旧不行。

最后想到会不会是基础库版本不行。后来发现果然。

到此才解决。我还特意回头看了下官方文档，发现这几个相关的版本描述不明确呀。着实有点坑。

记得如果代码没问题，请尝试切换基础库版本╮(╯▽╰)╭

小_林_子
关注
【微信小程序】小程序获取元素的宽度高度
疾术客
05-30 4699
微信小程序不能进行DOM操作，所以获取元素的信息就不能按照常规手法来做了。首先需要借助微信给我们开发者提供的一个API来实现返回一个SelectorQuery 对象实例。 接下来就好办多了，话不多说，上代码！ API：wx.createSelectorQuery() 具体实现代码如下： const query = wx.createSelectorQuery()...
微信小程序踩坑之video组件黑屏闪现
最新发布
qq_34425377的博客
08-15 1264
针对微信小程序video组件的黑屏问题，总结以下解决方案：1)无controls时poster无效，需用图片组件兜底并提前加载；2)黑屏现象可通过ready周期预加载和设置兜底图缓解；3)视频黑边问题可通过object-fit属性(cover/fill)或动态计算宽高比处理，极端情况可用transform缩放结合overflow:hidden的hack方案；4)推荐完整实现方案：结合封面图、预加载和错误处理，使用video+image双组件，通过loadedmetadata事件控制显隐。环境适配skylin
微信小程序之动态获取元素宽高
03-29
我以前一直以为微信小程序不能动态获取view元素的宽高。但是自从看到： wx.createSelectorQuery() 这个api接口，以前的某些问题就能得到解决了。。。 那么，这个api接口怎么用呢？ 首先，这个接口会返回一个对象实例。 var obj=wx.createSelectorQuery();  下面的就是返回的对象实例 obj 的所有内容。 (此图片来源于网络，如有侵权，请联系删除! )   返回的 obj 有五个方法： obj.in(component)：没用过这个方法，多用于组件的选择器。 obj.select(selector)：获取指定的节点，selector是css选
微信小程序实现动态获取元素宽高的方法分析
11-26
本文实例讲述了微信小程序实现动态获取元素宽高的方法。分享给大家供大家参考，具体如下： 我以前一直以为微信小程序不能动态获取view元素的宽高。但是自从看到： wx.createSelectorQuery() 这个api接口，以前的某些问题就能得到解决了。。。 那么，这个api接口怎么用呢？ 首先，这个接口会返回一个对象实例。 var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容。 返回的 obj 有五个方法： 1.  obj.in(component)：没用过这个方法，多用于组件的选择器。 2.  obj.select(sele
微信小程序获取元素宽高
Lyq2017901206的博客
05-27 1021
wxml <view class="Outerlayer" id="getheight"></view> js getheight: function () { var that = this; //创建节点选择器 var query = wx.createSelectorQuery(); //选择class id query.select('#getheight').boundingClien
微信小程序中获取某个元素的高度和宽度
希文Gershwin
08-01 3161
众所周知微信小程序中没用dome元素，想要获取某个元素的宽高，只有创建节点 直接上代码： js页面 //创建节点选择器 var query = wx.createSelectorQuery(); // 创建节点查询器 query //选择id var that = this; // 获取this // 这段代码的意思是选择class=every的节点，获取节点位置信...
Trae根据原型设计稿生成微信小程序密码输入框的踩坑记录
q1003675852的博客
02-27 2070
Trae根据原型设计稿生成微信小程序密码输入框的踩坑记录
解决微信小程序的video元素层级太高无法遮盖问题
苦涩精灵的博客
01-16 4430
解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题 今天在项目中遇到了这个问题，需要在微信小程序中用视频作为背景，微信开发者工具中模拟的没问题，真机调试就发现video的层级太高，其他元素设置 z-index 都低于 video 微信官方文档提供的解决办法 因为微信小程序的 video 原生组件层级太高，无法用 z-index 层叠。所以可以使用 <cover-view> <cover-image> 作为覆盖在原生组件之上的文本视图元素 可覆盖
如何为微信小程序添加第三方支付功能
master_chenchen的博客
09-12 1424
微信小程序作为现代移动互联网的重要组成部分，以其简洁高效的开发流程和无缝的用户体验，成为了开发者和用户的首选平台。特别是在电子商务、在线服务等领域，微信小程序更是发挥了巨大的作用。而在这些应用中，第三方支付功能几乎成了标配，因为它极大地简化了交易流程，提升了用户的购买体验。试想一下，用户在小程序中浏览商品后，只需几秒钟便能完成支付，这样的便捷性无疑让购物变得更加快速和愉快。不过，要在微信小程序中集成第三方支付功能，并非易事。首先，开发者需要了解并遵守相关的支付规范，确保交易的安全性和合规性。
微信小程序开发中的视频播放和弹幕评论功能
master_chenchen的博客
09-14 1122
想象一下，当你的小程序能够流畅地播放高清视频，就像在电影院里享受一场视听盛宴一样，不仅能够提升用户体验，还能让你的小程序在众多应用中脱颖而出。弹幕作为一种独特的评论形式，能够让观众在观看视频的同时发表自己的看法，形成一种即时互动的效果。而点播则可以满足用户随时回看的需求，两者相辅相成，共同提升小程序的价值。你可以把这里当作自己的家，无论是工作之余的小憩，还是寻找灵感的驿站，我都希望你能在这里找到属于你的那份快乐和满足。
小程序获取改元素的宽高，距离等等
Yzfeng21的博客
10-27 957
如果需要在循环中找到对应宽高等等，需要在该id上加上标识，以便后面需要做对应的处理。
微信小程序获取指定元素的宽高信息
weixin_44601930的博客
03-14 699
微信小程序获取指定元素的宽高信息。
微信小程序通过createSelectorQuery获取元素 高度，宽度与界面距离
weixin_45966674的博客
10-07 5519
小程序官方有提供给我们一个 const query = wx.createSelectorQuery() 函数。这里 我们定义了 多块 view 都用 行内样式设置了它的 高度和宽度。这里 就正常的输出了 每个元素 高度 宽度 与页面上下左右的距离。这里 我们获取了所有 类名中包含 textIn 的元素 并输出。我们运行代码 并点击按钮 点击查看。我们可以先编写这样一段代码。
微信小程序获取页面元素高度_微信小程序之动态获取元素宽度高度
weixin_28683689的博客
02-12 726
我以前一直以为微信小程序不能动态获取view元素的宽高。但是自从看到： wx.createSelectorQuery() 这个api接口，以前的某些问题就能得到解决了。。。那么，这个api接口怎么用呢？首先，这个接口会返回一个对象实例。var obj=wx.createSelectorQuery();返回的 obj 有五个方法：obj.in(component)：没用过这个方法，多用于组件的选择器...
微信小程序 获取window或某一节点的宽高
weixin_44646763的博客
08-24 2833
微信小程序 获取window或某一节点的宽高
微信小程序获取某个元素的高度宽度
阅读之后，对你有帮助，那就点个赞再走吧
04-03 4675
获取小程序的元素高度和宽度，得在js页面使用this下的height: rect.width + 'px' 看下代码 js页面 //创建节点选择器 var query = wx.createSelectorQuery(); //选择id var that = this; query.select('.every').boundingClientRect(fun...
微信小程序获取页面元素高度_微信小程序之动态获取元素宽高
weixin_32899685的博客
02-12 2094
我以前一直以为微信小程序不能动态获取view元素的宽高。但是自从看到： wx.createSelectorQuery() 这个api接口，以前的某些问题就能得到解决了。。。那么，这个api接口怎么用呢？首先，这个接口会返回一个对象实例。var obj=wx.createSelectorQuery();下面的就是返回的对象实例 obj 的所有内容。返回的 obj 有五个方法：obj.in(compo...
微信小程序 - 动态获取元素宽高
一尾流莺 半世情缘
07-31 1267
动态获取元素宽高 query.select(selector) query .selectAll(selector)
小程序获取元素宽高
qq_34856863的博客
01-09 379
let query = wx.createSelectorQuery(); //选择id let that = this; query.select('.top').boundingClientRect(function (rect) { console.log(rect) }).exec();
微信小程序开发：京东首页demo源码解析
资源摘要信息:"基于微信小程序实现类似京东首页demo源码分享" 知识点概述： 微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序的出现，让...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值