微信小程序适应机型布局

小程序布局三部分，头+内容+底部，自定义头(navigation-bar)+内容+自定义底部(tab-bar)，使中间的内容适应不同的机型

第一种：通过js控制高度

app.js

getShowScreenHeight() { try { // 获取系统信息（同步方式，兼容性更好） const systemInfo = wx.getWindowInfo(); // 获取胶囊按钮位置（同步） const capsuleInfo = wx.getMenuButtonBoundingClientRect(); // 计算导航栏高度（状态栏高度 + 胶囊按钮高度 + 上下间距） const statusBarHeight = systemInfo.statusBarHeight; const navHeight = statusBarHeight + capsuleInfo.height + (capsuleInfo.top - statusBarHeight) * 2; // 兼容处理：获取安全区域底部（基础库<2.11.0时使用bottom属性） const safeAreaBottom = systemInfo.safeArea?.bottom || systemInfo.bottom; const tabHeight = systemInfo.screenHeight - safeAreaBottom; // 计算内容区域高度（屏幕高度 - 导航栏高度 - TabBar高度） const screenHeight = systemInfo.screenHeight - navHeight - tabHeight; // 保存到全局数据 this.globalData.navHeight = navHeight; this.globalData.tabHeight = tabHeight; this.globalData.screenHeight = screenHeight; } catch (e) { // 备用方案（当API不可用时） this.globalData.screenHeight = 600; // 默认高度 } }

wxml

<navigation-bar navTitle="{{navTitle}}" iconType="{{iconType}}"></navigation-bar> <scroll-view scroll-y style="height: {{height}}px;"> </scroll-view> <tab-bar selected="{{selected}}"></tab-bar>

js

data: { navTitle:"正式考场", selected:2,//在tabbar列表中的序号 iconType:"home", height:getApp().globalData.screenHeight-10, },

上述的getApp().globalData.screenHeight-10；减10是测试过程中进行的优化

第二种：通过css控制

wxml

<view class="page-content"> <navigation-bar navTitle="{{navTitle}}" iconType="{{iconType}}"></navigation-bar> <view class="content"> </view> <tab-bar selected="{{selected}}"></tab-bar> </view>

wxss

.page-content{ display: flex; flex-direction: column; height: 100vh; /*页面占满全屏*/ } .content{ flex: 1; /*余下内容填充*/ width: 100%; display: flex; flex-direction: column; background-color: #ffffff; } .bottom{/*如有底部内容，希望始终保持在tab-bar上方*/ position:flex; padding-bottom: calc(env(safe-area-inset-bottom) + 110rpx); }

关于flex:1 的基本含义

当弹性容器（display: flex 或 display: inline-flex）的子元素设置 flex: 1 时，该元素的行为如下：

1. ‌初始尺寸为 0‌：由于 flex-basis 被设置为 0%，元素的初始宽度或高度（取决于主轴方向）被视为 0，不占用任何空间。‌34
2. ‌按比例分配剩余空间‌：如果父容器有剩余空间，flex-grow: 1 会使得该元素与其他同样设置 flex-grow 为 1 的元素等比例地放大以填充这些空间。‌15
3. ‌空间不足时等比例收缩‌：当父容器空间不足以容纳所有子元素时，flex-shrink: 1 会使得该元素与其他可收缩元素等比例缩小。‌