微信小程序动态获取view的高度以及获取view到页面顶部的距离

最新推荐文章于 2025-07-02 11:27:48 发布
原创 最新推荐文章于 2025-07-02 11:27:48 发布 · 1w 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在微信小程序中动态获取view的高度，并讨论了在数据通过API获取并使用for循环渲染页面时，如何确保正确获取view到页面顶部的距离。重点放在JS文件的onReady方法和在数据加载后的处理策略上。

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

wxml页面

给需要获取高度的view标签添加一个id

<view class='jbox' id="test">test</view>

.JS文件

通常是这样写，写在onReady，页面初次渲染完成里面。

 onReady: function (e) {
   
   
      var query = wx.createSelectorQuery
最低0.47元/天 解锁文章

200万优质内容无限畅学
微信小程序canvas内使用获取view元素宽高位置错
u011714807的博客
05-08 1110
微信小程序canvas内使用获取view元素宽高位置错
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
微信小程序怎么动态获取view的高度以及获取view到页面顶部的距离
热门推荐
PromiseCao的博客
12-01 2万+
首先给你的xml对象一个id： &lt;view class="usermotto" style="height:213px;" id='mjltest'/&gt; 然后在js里，用一个SelectorQuery来选择对应id的节点（注意id前面要加一个#号），就可以获取对应节点的属性，包括高度。 //创建节点选择器 var query = wx.createSelectorQuery(...
微信小程序自定义导航栏高度适配
最新发布
zwh2487577416的博客
07-02 317
顶部导航分为状态栏区域和标题区域。状态栏区域可以通过 wx.getSystemInfoSync() 中的 statusBarHeight 获取其高度，通过 windowWidth 获取其宽度；标题栏则要通过 wx.getMenuButtonBoundingClientRect() 获取小程序右上方的操作按钮位置及大小，再通过计算其top和状态栏高度等获得，标题栏宽度为windowWidth，高度为 （胶囊按钮的top - 状态栏高度）* 2 + 胶囊的高度。其他部分也通过类似的方法进行换算。
小程序---获取view的高度
longtime的博客
09-05 8132
在我们做小程序的时候, 难免会碰到需要将界面分成俩部分来展示上下俩个部分, 这时我们就需要计算上部分view框的高度, 好让下部分填满整个界面 一种方法是把上部分view的高度固定,单位用rpx .然后下部分高度就可以用微信提供的方法计算得出, 代码如下: data: { scroll_height: 450, //初始滚屏的高度 }, //页面加载 onLoad: func...
微信小程序如何让获取view的高度
weixin_34191845的博客
04-03 1514
昨天在群里有过美女前端问了一个问题，小程序如何获取view的高度，说百度了好久，看了半文档没有解决，正好我前几天遇到过这过问题，就在这分享一下如何解决。 <大盒子标签> <内容标签>{{content}}</内容标签> <内容标签>{{content}}</内容标签> <自己加跟空标签 id="viewHight">这个是为了...
#小程序#获得屏幕高度，view高度
G_wendy的博客
09-26 7526
wxml中：&lt;view id='getheight'&gt;&lt;/view&gt; var query = wx.createSelectorQuery(); query.select('#getheight').boundingClientRect() query.exec(function (res) { //console.log(res); console.log(r...
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
10-17
通过以上介绍，可以看出实现自定义的顶部滑动TabBar选项卡以及页面切换功能涉及到对微信小程序中多个组件的理解和应用，包括`scroll-view`、`view`、`swiper`等。开发者需要掌握如何结合布局、样式和事件处理来创建...
微信小程序 scroll-view 实现锚点跳转功能
01-19
在微信小程序中，使用 scroll-view 实现长页面的标记跳转，官方文档中没有例子演示，锚点标记主要是使用<scroll> 的 scroll-into-view 属性。 　实现锚点跳转主要以下几点： 　1、最外层容器使用 scroll-view 　2、...
微信小程序scroll-view仿拼多多横向滑动滚动条
10-18
通过本知识点的介绍，大家可以了解到微信小程序scroll-view组件在实现仿拼多多横向滑动滚动条时的关键属性和方法，并能够根据实际的开发需求进行相应的代码实现。希望本文能够对正在开发微信小程序的朋友们提供有...
微信小程序获取view标签高度
巴博尔的学习博客
07-28 924
微信小程序获取view标签高度 2020/07/28 var query = wx.createSelectorQuery();//创建节点选择器 query.select('#zumn1').boundingClientRect(function (rect) { that.setData({ zumn1: rect.top }); }).exec();
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
01-03
本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 index.wxml文件 <view class=view xss=removed>我是view标签，我现在的宽度是{{view.Width}}px,高度是{{view.Height}}px</view> <input placeholder=输入view标签的宽度 bindinput=viewWidth></input> <input placeholder=
微信小程序实现动态获取元素宽高的方法分析
11-26
本文实例讲述了微信小程序实现动态获取元素宽高的方法。分享给大家供大家参考，具体如下： 我以前一直以为微信小程序不能动态获取view元素的宽高。但是自从看到： wx.createSelectorQuery() 这个api接口，以前的某些问题就能得到解决了。。。 那么，这个api接口怎么用呢？ 首先，这个接口会返回一个对象实例。 var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容。 返回的 obj 有五个方法： 1.  obj.in(component)：没用过这个方法，多用于组件的选择器。 2.  obj.select(sele
微信小程序动态计算scroll-view高度
qq_29594051的博客
01-18 1273
借鉴微信文档：自定义导航栏高度精确适配方案 | 微信开放社区
【微信小程序】获取view等组件的高度等信息（获取节点信息）
yapeee的博客
07-10 1万+
    js//创建节点选择器 var query = wx.createSelectorQuery(); query.select('.list').boundingClientRect() query.exec((res) =&gt; { scrollHeight = res[0].height; // 获取list高度 })res内容：tips:q...
微信小程序获得高度
weixin_30301449的博客
07-23 319
wx.getSystemInfo({ success: (res) => { wx.createSelectorQuery().select('#scrollbox').boundingClientRect((rect) => { this.setData({ ...
微信小程序 JS 获取View 和 屏幕相关属性（高度、宽度等等）
weixin_30378623的博客
06-11 766
wx.getSystemInfo({success: function (res) {thisWidth = res.windowWidth;}}); that.setData({view_Width: thisWidth / ColIndex})//设置列宽 console.log('---...
uniapp——获取某元素距离顶部的距离，并将高度应用到css里面，为实现scroll-view内容而不让整个页面出现滚动条。
努力、拼搏、奋进
09-17 8470
uniapp——获取某元素距离顶部的距离，并将高度应用到css里面，为实现scroll-view内容而不让整个页面出现滚动条。
微信小程序scroll-view高度精准计算与全机型适配策略
在微信小程序开发中，精确计算`scroll-view`组件的高度是一项常见的挑战，尤其是在复杂的布局中，由于小程序`scroll-view`对高度的要求，开发者不得不面对如何动态计算其尺寸的问题。本文将详细介绍如何进行这种全...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值