收藏
回答

微信小程序中隐藏的元素高宽都为0是正常的吗?

微信小程序中隐藏的元素高宽都为0是正常的吗?不是说隐藏了但是会渲染吗?怎么隐藏了拿到的位置和高宽数据都是0呢

// page/index/index.wxml
<view class="test" hidden="true">
  <view style="height: 100rpx; width: 200rpx;">隐藏测试内容</view>
</view>

// page/index/index.js
 onLoad: function () {
    var query = wx.createSelectorQuery(); //创建节点选择器
    const that = this;
    query.select('.test').boundingClientRect(function (rect) {
      const addressWidth = rect.width;
      console.log(rect)
    }).exec();
  },



目录结构:


运行结果:无论是高宽还是边距都为0,如果用wx:if来实现的话能拿到但是会频繁的创建和删除组件,造成性能问题,有没人解答下,谢谢

回答关注问题邀请回答
收藏

2 个回答

  • Tm
    Tm
    02-05

    好的,谢谢啦

    02-05
    赞同
    回复
  • 老张
    老张
    02-05

    按你的意思,如果是高100,隐藏后就应该得有一大片空白了?

    CSS还需要再学习。

    02-05
    赞同
    回复 4
    • Tm
      Tm
      02-05
      求助:
      需求:项目要求多组tabBar,有用户,管理员等多个角色
      实现:自定义的底部导航,实现思路是导航为index page页面,四个导航内容作为组件的形式加载进来(防止闪现);
      问题:一次性加载所有组件时,隐藏的组件获取到的高度为0,无法进行数据设置?


      元素能获取到,但是高度和宽度都为0


      一个index Page页面中四个组件,是一次性加载的,根据不同的tabBar显示不同的组件,
      02-05
      回复
    • 老张
      老张
      02-05回复Tm
      wx.createSelectorQuery获得的高度并不是无素的高度,而是该元素在屏幕上所占的高度,所以高度为什么100px的元素,如果hidden时,屏幕上所占的高度也是0
      02-05
      回复
    • Tm
      Tm
      02-05回复老张
      非常感谢您的回复,那针对于这个问题,若我想要隐藏的组件在最开始加载渲染时获取某个元素的高度,并通过此高度计算可用高度怎么实现呢?

      我刚刚把index Page页面的隐藏改成  wx:if  能够获取隐藏组件的高度,但是频繁的创建会消耗性能,通过隐藏的话会更好,请问有什么好的办法吗?
      02-05
      回复
    • 老张
      老张
      02-05回复Tm
      你想多了。就用wx:if,等你实实在在发现性能降低了再改。
      02-05
      回复
登录 后发表内容
问题标签