微信小程序获取某个元素的高度宽度

最新推荐文章于 2025-03-18 14:58:24 发布

theOtherSky

最新推荐文章于 2025-03-18 14:58:24 发布

阅读量7.5w

点赞数 8

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_35181466/article/details/80701767

版权

微信小程序专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用WXJS动态获取元素的高度，并将其应用于视图的高度设置。通过创建节点选择器并调用boundingClientRect方法，可以获取指定类名元素的尺寸信息，进而更新视图的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
  js页面 
 
  //创建节点选择器 
 
  var query = wx.createSelectorQuery(); 
 
  //选择id 
 
  var that = 
  this; 
 
   query.select( 
  '.every').boundingClientRect( 
  function (rect) { 
 
  // console.log(rect.width) 
 
   that.setData({ 
 
   height: rect.width + 
  'px' 
 
   }) 
 
   }).exec();

wxml页面

 
 < 
 view 
 class= 
 'every' 
 style= 
 'height:{{height}}'></ 
 view 
 > 

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

theOtherSky

关注关注

8
点赞
踩
33

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【微信小程序】小程序获取元素的宽度高度

疾术客

05-30

4645

微信小程序不能进行DOM操作，所以获取元素的信息就不能按照常规手法来做了。首先需要借助微信给我们开发者提供的一个API来实现返回一个SelectorQuery 对象实例。接下来就好办多了，话不多说，上代码！ API：wx.createSelectorQuery() 具体实现代码如下： const query = wx.createSelectorQuery()...

微信小程序 - 动态获取元素宽高

一尾流莺半世情缘

07-31

1219

动态获取元素宽高 query.select(selector) query .selectAll(selector)

4 条评论您还未登录，请先登录后发表或查看评论

微信小程序canvas内使用获取view元素宽高位置错

u011714807的博客

05-08

1064

微信小程序canvas内使用获取view元素宽高位置错

微信小程序之动态获取元素宽高

weixin_30652879的博客

08-31

1205

我以前一直以为微信小程序不能动态获取view元素的宽高。但是自从看到：wx.createSelectorQuery()这个api接口，以前的某些问题就能得到解决了。。。那么，这个api接口怎么用呢？首先，这个接口会返回一个对象实例。 var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容。返回的 obj 有五...

微信小程序计算属性与监听器：miniprogram-computed

热门推荐

夜阑珊妖妖

12-27

1万+

获取元素距离顶部距离、页面滚动监听 onReady: function () { var that = this; var query = wx.createSelectorQuery() query.select('.lplistbd').boundingClientRect(function (res) { that.setData({ ta...

微信小程序通过createSelectorQuery获取元素高度，宽度与界面距离

weixin_45966674的博客

10-07

5272

小程序官方有提供给我们一个 const query = wx.createSelectorQuery() 函数。这里我们定义了多块 view 都用行内样式设置了它的高度和宽度。这里就正常的输出了每个元素高度宽度与页面上下左右的距离。这里我们获取了所有类名中包含 textIn 的元素并输出。我们运行代码并点击按钮点击查看。我们可以先编写这样一段代码。

获取微信小程序元素高度

qq_42877655的博客

03-22

151

获取微信小程序元素高度 let query = wx.createSelectorQuery(); query.select('#backgroundImg').boundingClientRect(rect => { let listXxkHeight = rect.height; }).exec();

微信小程序获取元素的高度

S筱潇S四维Smile

10-21

1869

微信小程序获取元素的高度

微信小程序-获取某一元素的高度

xiannverhaha的博客

05-31

1774

this.createSelectorQuery().select("#_house-description").boundingClientRect(res => { this._descriptionTextLoaded = true; if (res) { const { height } = res; if (pixel2rpx(height) &g

微信小程序如何获取元素的高度

gyueh的博客

08-03

4841

wxml部分代码如下： <view class="bottom" style="top:{{top}}"></view> js部分代码如下： data: { top: '', }, onReady: function () { let query = wx.createSelectorQuery(); query.select('.top').boundingClientRect(rect => { //获取到元素 let

【无标题】微信小程序获取元素节点的高度(节点信息)

棠樾的博客

02-24

1372

获取元素的高度，并根据高度做一些操作。使用this.$nextTick()的原因：当页面的数据还没有渲染完成的时候，获取的元素是undefined，所以要等所有的节点都渲染完成之后，才能操作。 this.$nextTick(() => { const query = uni.createSelectorQuery().in(this); query .select("

获取View的高度和宽度

Programming

04-01

3012

private void measureView(View child) { ViewGroup.LayoutParams params = child.getLayoutParams(); if (params == null) { params = new ViewGroup.LayoutParams(

微信小程序 获取屏幕的高度和宽度

09-25

在微信小程序中，获取屏幕的高度和宽度可以通过JavaScript或WXML来实现。以下是两个常见的方法： 1. 使用wx.createSelectorQuery() API: ```javascript Page({ onLoad: function () { const query = wx.createSelectorQuery() query.select('#yourViewId') // 替换为你要查询的视图ID .fields({ size: true // 获取尺寸信息 }) .exec((res) => { const {width, height} = res[0].size // res数组的第一个元素通常包含尺寸信息 console.log('屏幕宽度:', width) console.log('屏幕高度:', height) }) } }) ``` 2. 使用wx.getSystemInfoSync() 函数： ```javascript Page({ onReady() { let systemInfo = wx.getSystemInfoSync(); console.log('屏幕宽度:', systemInfo.windowWidth); console.log('屏幕高度:', systemInfo.windowHeight); } }) ``` 这两种方法分别在不同的场景下使用，前者适合在动态查询某个节点大小时使用，后者则是在页面加载完成后一次性获取设备信息。