微信小程序100vh和windowHeight不一样高

最新推荐文章于 2024-07-11 20:30:00 发布

原创最新推荐文章于 2024-07-11 20:30:00 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

这篇文章展示了如何在小程序中获取窗口高度并应用于页面布局。通过WXML定义视图结构，使用WXSS设置视图样式，如百分比宽度和自动居中，同时JS部分在页面加载时获取系统信息以确定窗口高度。

效果：

基础库版本：

代码：

wxml

<view class="container">
	<view class="f">
		<view class="s" style="height: {{windowH/2}}px;"></view>
	</view>
</view>

wxss

.container {
  width: 100vw;
  height: 100vh;
}

.f {
  width: 90vw;
  height: 50vh;
  background-color: lightpink;
  margin: 0 auto;
}

.s{
  width: 90%;
  background-color: lightblue;
  margin: 0 auto;
}

Page({
  data: {
    windowH: 0,
  },
  onLoad() {
    wx.getSystemInfo({
      success: res => {
        this.setData({
          windowH: res.windowHeight
        })
      }
    })
  },
})