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

This topic created in 3285 days ago, the information mentioned may be changed or developed.

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

rpx

高度

计算

元素

16 replies • 2017-06-01 11:22:56 +08:00

suinia

Jun 1, 2017

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

hoythan

Jun 1, 2017

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

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

hoythan

Jun 1, 2017

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

suinia

Jun 1, 2017

取到的就是 px

hoythan

Jun 1, 2017

@suinia 取到的不是 px

hronro

Jun 1, 2017

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

hoythan

Jun 1, 2017

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

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

hoythan

Jun 1, 2017

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

suinia

Jun 1, 2017

@hoythan 你这计算得到的是 rpx

hoythan

Jun 1, 2017

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

suinia

Jun 1, 2017

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

hoythan

Jun 1, 2017

@suinia
我知道错了,对不起

hoythan

Jun 1, 2017

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

hoythan

Jun 1, 2017

@suinia 上面是代码描述错误

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

hoythan

Jun 1, 2017

@suinia 跪求帮忙 5555555

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

hoythan

Jun 1, 2017

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