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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2733 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

rpx

高度

计算

元素

16 条回复 • 2017-06-01 11:22:56 +08:00

suinia

2017-06-01 10:10:05 +08:00

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

hoythan

2017-06-01 10:13:42 +08:00

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

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

hoythan

2017-06-01 10:14:55 +08:00

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

suinia

2017-06-01 10:19:51 +08:00

取到的就是 px

hoythan

2017-06-01 10:22:04 +08:00

@suinia 取到的不是 px

hronro

2017-06-01 10:22:54 +08:00

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

hoythan

2017-06-01 10:23:42 +08:00

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

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

hoythan

2017-06-01 10:24:08 +08:00

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

suinia

2017-06-01 10:27:50 +08:00

@hoythan 你这计算得到的是 rpx

hoythan

2017-06-01 10:30:10 +08:00

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

suinia

2017-06-01 10:38:26 +08:00

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

hoythan

2017-06-01 10:43:13 +08:00

@suinia
我知道错了,对不起

hoythan

2017-06-01 10:44:01 +08:00

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

hoythan

2017-06-01 10:44:31 +08:00

@suinia 上面是代码描述错误

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

hoythan

2017-06-01 10:58:35 +08:00

@suinia 跪求帮忙 5555555

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

hoythan

2017-06-01 11:22:56 +08:00

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