微信小程序计算scroll-view的高度

本文介绍在微信小程序中如何为 ScrollView 设置动态高度,并考虑顶部导航栏或搜索栏等元素的存在。文章详细展示了如何利用 wx.getSystemInfo 和 createSelectorQuery 接口获取窗口高度及特定组件高度,从而实现准确的高度自适应。

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

在小程序里面如果用到scroll-view,就会看到这样一句话

使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height。

这是官方给出的文档,所以我们通常的做法这样的

<scroll-view scroll-y="true" style="height:{{scrollHeight}}px;">

在wxml文件里面定义高度,然后通过

wx.getSystemInfo({
      success: function (res) {
        console.info(res.windowHeight);
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
这个不是我今天要说的,我今天要说的是如果有头部怎么办?如何把头部的高度获取出来,并减掉头部的距离:

wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
    }).exec()

官方有这样一个api,然后把代码改成这样

    wx.getSystemInfo({
      success: function (res) {
        console.info(res.windowHeight);
        let height = res.windowHeight;
        wx.createSelectorQuery().selectAll('.search-bar').boundingClientRect(function (rects) {
          rects.forEach(function (rect) {
            that.setData({
              scrollHeight: res.windowHeight - rect.bottom
            });
          })
        }).exec();
      }
    });
标红的地方是那个节点的class名字。

就到这。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值