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

Momentzxl

已于 2024-03-13 14:22:23 修改

阅读量373

点赞数 2

文章标签：微信小程序小程序 vue.js 前端 javascript js vue

于 2024-03-13 14:20:47 首次发布

本文链接：https://blog.youkuaiyun.com/Momentzxl/article/details/136679064

版权

文章介绍了如何在微信小程序中利用wx.createSelectorQueryAPI，通过JavaScript获取具有特定ID的HTML元素(#test-div)的边框矩形区域的高度。

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

html:

<div id="test-div"></div>

js:

wx.createSelectorQuery().select('#test-div').boundingClientRect(function (rect) {
  console.error(rect.height)
}).exec()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Momentzxl

关注关注

2
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

xiannverhaha的博客

05-31

1770

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

微信小程序 获取元素高度（获取元素节点信息）

最新发布

weixin_44601930的博客

03-14

262

微信小程序获取指定元素的宽高信息。

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

快乐的小跳蛙的博客

02-21

1930

小程序获取某个元素的高度。

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

weixin_45966674的博客

10-07

5237

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

【微信小程序高频面试题——精选一】

ytfty24124的博客

11-28

7705

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到IOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。

微信小程序 之简答题

此心安处

12-26

9709

1 小程序的页面生命周期函数包含哪些？它们分别在什么时候触发？正确答案： (1)onLoad页面加载时触发 (2)onReady页面初次渲染完成时触发 (3)onShow页面显示时触发 (4)onHide页面隐藏时触发 (5)onUnload页面卸载时触发 2 简单介绍微信小程序、原生APP和Web App之间的区别。正确答案： 微信小程序：是继原生APP、Web APP之后出现的一种新的APP形态。适合开发一些业务逻辑简单、低频次使用、对性能要求不高的应用。原生APP：由于Android和IOS

从零构建一个微信小程序

M_ik_Z的博客

01-20

3545

一、微信小程序介绍 微信小程序，简称小程序，英文名：Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。 1.1 为什么是微信小程序？微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户。推广 app 或公众号的成本太高。开发适配成本低。容易小规模试错，然后快速迭代。跨平台。 1.2 还有其他的小程序 不容忽视支付宝小程序 百度小程序 QQ 小程序 今日头条 + 抖音小程序 1.3 优秀的第三方小程序

微信小程序基本用法1(二)

L_u_c_k_y_m_a_n的博客

06-22

1126

1、模板语法 WXML（WeiXin Markup Language）是框架设计的⼀套标签语言，结合基础组件、事件系统，可以构建出页面的结构。 1.1 小案例 1.1.1 先打开 app.json 文件,新建一个页面 1

微信小程序学习笔记（详细汇总）

perfect_code_hzy的博客

09-20

7245

小程序学习笔记一、微信小程序简介微信小程序优点：二、微信小程序环境准备2.1 申请帐号2.2 安装开发工具一、微信小程序简介 微信小程序，小程序的一种，英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用，它实现了应用触手可及"的梦想，用户扫一扫或搜一下即可打开应用。 微信小程序，之前叫应用号，2017年正式上线 微信小程序优点：微信有海量用户,且粘性很高，在微信里开发产品更容易触达用户推广app或公众号的成本太高开发适配成本低容易小规模试错,然后快速迭代跨平台

微信小程序实现动态获取元素宽高的方法分析

11-26

本文实例讲述了微信小程序实现动态获取元素宽高的方法。分享给大家供大家参考，具体如下：我以前一直以为微信小程序不能动态获取view元素的宽高。但是自从看到： wx.createSelectorQuery() 这个api接口，以前的某些问题就能得到解决了。。。那么，这个api接口怎么用呢？首先，这个接口会返回一个对象实例。 var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容。返回的 obj 有五个方法： 1. obj.in(component)：没用过这个方法，多用于组件的选择器。 2. obj.select(sele

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

gyueh的博客

08-03

4839

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

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

S筱潇S四维Smile

10-21

1868

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

微信小程序之动态获取元素宽高、距离顶部底部的距离

qq_40685439的博客

09-30

9628

一.首先，这个接口会返回一个对象实例。 var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容。返回的 obj 有五个方法： obj.in(component)：没用过这个方法，多用于组件的选择器。 obj.select(selector)：获取指定的节点，selector是css选择器。返回一个 NodesRef 对象实例，可以用于获取节点信息。 obj.selectAll(selector)：获取指定的节点，selector是c

获取微信小程序元素高度

qq_42877655的博客

03-22

149

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

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

weixin_30266829的博客

09-02

853

<div class="ex" id="ex">三行的高度，三行的高度，三行的高度，三行的高度，三行的高度，三行的高度，三行的高度</div> mounted: function (){ 　　//页面中直接调用　　this.getElementHeight('#ex') 　　//组件中调用，我也不知道为什么要重新定义this 　　let _this =...