因为不同手机状态栏的高度不同，首先需要在一开始的app.js里面获取当前设备的状态栏高以及机型
App({onLaunch: function () {this.getVersion()},globalData: {version:'', // 小程序基础库版本号（兼容小程序api用）barHeight: 0, // 手机状态栏的高度isIos: false, // 是否为ios}, getVersion() {let _self = this;wx.getSystemInfo({success: function (res) {let version = res.SDKVersion;_self.globalData.statusBarHeight = res.statusBarHeight; // 手机状态栏的高度if(res.platform == "ios" || res.system.indexOf('iOS') > -1 || res.system.indexOf('macOS') > -1){// 是否为ios这里包括ipad和macos_self.globalData.isIos = true;}_self.globalData.version = version.replace(/\./g, "");}})}...
小程序标题栏的高度，一般ios是44px 安卓是46px
wxml
<!-- 页面标题 --><view class="title-pd" style="height: {{isIos ? titlePadTop + 44 : titlePadTop +46}}px"><view class="title" style="box-sizing: content-box; padding-top: {{titlePadTop}}px; height: {{isIos ? 44 : 46}}px"><view class="iconfont icon-arrow-right mr-2 size-32" bindtap="goBack"></view><view>标题</view><view></view></view></view>
wxss
/* 页面标题 */.title{position: fixed;z-index: 999;top: 0;left: 0;width: 100%;display: flex;align-items: center;justify-content: space-between;color: #000000;font-size: 26rpx;background-color: #ffffff;}.title >view {min-width: 60rpx;}.title .iconfont{margin-left: 20rpx;font-size: 38rpx;}
js 在加载的时候去获取全局globalData的值来赋值
data: {titlePadTop: 0, // 顶部状态栏的高度isIos: false, // 是否为ios}
