微信小程序到底是如何计算出元素所需高度的?

[hoythan]

如图所示,知道上面的高度是 380rpx 下面的高度是 98rpx 计算出中间的 px 高度 使得元素占满页面.

[suinia]

1. wx.getSystemInfo 可以获取屏幕的高宽
2. 用 flex 布局可以直接解决这个问题

[hoythan]

@suinia 老安卓机用 flex 会要命.

wx.getSystemInfo 获取后要怎么计算出 px?

[hoythan]

@suinia 最主要的是 scroll-view 必须使用 px

[suinia]

取到的就是 px

[hoythan]

@suinia 取到的不是 px

[hronro]

@hoythan #2 都上微信小程序了，还管兼容性？

[hoythan]

@suinia 计算整个页面 px 高度应该是

wx.getSystemInfoSync().windowHeight * (750 / wx.getSystemInfoSync().windowWeight)

[hoythan]

@hronro 不考虑兼容也得考虑 scroll-view 必须写 px 高度吧?

[suinia]

@hoythan 你这计算得到的是 rpx

[hoythan]

@suinia 兄弟我倒是给你整傻了,你觉得 iphone7plus 高度只有 672px 吗?

[suinia]

囧了。。。屏幕高度 736px 窗口高度 672px 不信你写个<view style="width:100px;height:672px;">试试不就知道了

[hoythan]

@suinia
我知道错了,对不起

[hoythan]

@suinia
那最后中间的那块高度应该是:
wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().screenWidth / 750 * 380 + 98)
可是现实上下面还是缺了一大块

[hoythan]

@suinia 上面是代码描述错误

wx.getSystemInfoSync().windowHeight - wx.getSystemInfoSync().screenWidth / 750 * (380 + 98)
是这个

[hoythan]

@suinia 跪求帮忙 5555555

我上面的高度固定 180rpx 下面的高度固定 118rpx
我通过 wx.getSystemInfoSync().windowHeight - ((wx.getSystemInfoSync().screenWidth / 750) * 323) 计算出来高度后,距离底部竟然还有一段 30px 左右的距离

[hoythan]

@suinia 找到原因了,我直接在 data 里面计算了,放在 onLoad 里面才行...不知道原因