​小程序页面如何实现高度自适应
发布于 5 年前 作者 xiuying46 2700 次浏览 来自 问答

小程序页面如何实现高度自适应

如图：

这个是iPhone7 打开时候的样子首页 但是其实 小程序下面还有一个板块

用iPhoneX 这种比较长的手机 不用往下滑就可以看到全部了

我在这里想问一下大家 如何做到不管手机是什么尺寸，只要进来就能看到完整的页面 不用下滑。

2 回复

page的高度设置100vh 然后分3块  加起来等于100vh即可 如下代码

<view class=“div1”></view>

<view class=“div2”></view>

<view class=“div3”></view>

page {height: 100vh; }

view {background: #eee; }

.div1 {height: 20vh; background: red; }

.div2 {height: 70vh; }

.div3 {height: 10vh; background: orange; }

你现在的尺寸单位是rpx吗？

回到顶部