【实战笔记】uniapp微信小程序开发获取指定元素距离视口底部的高度

  • 原创
  • 作者:程序员三丰
  • 发布时间:2025-12-25 21:54
  • 浏览量:25
微信小程序开发过程中,由于不同类型的移动设备顶部状态栏以及导航栏的高度不同,再加上我们还会自定义一些元素,经常会遇到获得在垂直视口某个区域的高度的难题,本文提供一个思路,抛砖引玉!

业务需求

比如一些scroll-view、z-paing等支持垂直滚动的组件,一般都需要设置一个高度值,允许的值:

  • 固定的高度,如:100px,200rpx……等。
  • CSS可计算的高度,比如可以知道组件位置距离顶部的距离(假设是200rpx),那么可以设置height为calc(100vh - 200rpx)。

那么最终我们场景都不满足上面的两种条件,就是不能很容易得到想要的高度,那么怎么办呢?

解决思路

其实大家很容易想到动态计算,可是由于组件结构复杂,而且很多组件并没有固定高度,从而也无法获得准确的高度。
正常思维都是自上而下,先计算出滚动组件以上的高度,结果很困难或者麻烦。

那么我可以逆向思维考虑下:我可以是不是可以通过如下的思路来:

  • 先通过uniapp获取节点信息的api uni.createSelectorQuery()来获取节点的坐标信息,其中我们下一步会用到元素底部到页面顶部的距离bottom;
  • 然后通过 uni.getWindowInfo()这个api 获取系统信息,返回结果中就有一个是可使用窗口的高度windowHeight,到这里可能大家就明白了,窗口高度 减去 上一步元素底部到页面顶部的距离 不就是元素底部到页面底部的距离。
  • 最后还需要好考虑底部安全区域,uni.getWindowInfo()也返回了,safeAreaInsets.bottom,也要減去这个值,才是安全可靠的高度。

代码实现

onReady() {
  const query = uni.createSelectorQuery().in(this);
  query
    .select("#balance-block-title") // 要查询的DOM元素的id属性值
    .boundingClientRect((data) => {
      const window_info = uni.getWindowInfo();
      console.log({ data, window_info });
      // 计算高度:可使用窗口高度 - 元素底部到页面顶部的距离 - 底部安全区域的高度
      this.height = window_info.windowHeight - data.bottom - window_info.safeAreaInsets.bottom
    })
    .exec();
},

注意事项

如果计算结果不准确,可以参考下面的思路进行排除。

  • 一定要在正确的生命周期中进行查询,如果DOM还没有渲染完成,获取到的数据不准去那么计算结果就不准确。
  • 一定检查父级dom元素是否设置padding-bottom、margin-bottom等影响计算结果的因素。
声明:本文为原创文章,51blog.xyz和作者拥有版权,如需转载,请注明来源于51blog.xyz并保留原文链接:https://www.51blog.xyz/article/100.html

文章归档

推荐文章

buildadmin logo
Thinkphp8 Vue3 Element PLus TypeScript Vite Pinia

🔥BuildAdmin是一个永久免费开源,无需授权即可商业使用,且使用了流行技术栈快速创建商业级后台管理系统。

热门标签

PHP ThinkPHP ThinkPHP5.1 Go Mysql Mysql5.7 Redis Linux CentOS7 Git HTML CSS CSS3 Javascript JQuery Vue LayUI VMware Uniapp 微信小程序 docker wiki Confluence7 学习笔记 uView ES6 Ant Design Pro of Vue React ThinkPHP6.0 chrome 扩展 翻译工具 Nuxt SSR 服务端渲染 scrollreveal.js ThinkPHP8.0 Mac webman 跨域CORS vscode GitHub ECharts Canvas vue3 three.js 微信支付 PHP全栈开发