对于自定义导航栏,需要在全局配置文件中 app.js 中,window下修改 navigationStyle 属性的默认值。导航栏样式(navigationStyle),仅支持以下值:default
默认样式custom
自定义导航栏,只保留右上角胶囊按钮
详情见小程序API
对于不同的手机尺寸屏幕,顶部导航栏的高度不同。需要根据手机屏幕大小,动态计算手机顶部导航栏高度。
{
'iPhone': 64,
'iPhone X': 88,
'android': 68
}
例如:
在小程序页面加载之前,会首先运行 app.js 文件中 onLaunch 【当小程序初始化完成时,会触发 onLaunch(全局只触发一次)】。通过调用小程序API :wx.getSystemInfo,获取到手机设备信息,比如:状态栏高度,且通过设备高度计算出对应的导航栏高度。
app.js
onLaunch: function() {
const vm = this
wx.getSystemInfo({
success: function(res) {
let totalTopHeight = 68
if (res.model.indexOf('iPhone X') !== -1) {
totalTopHeight = 88
} else if (res.model.indexOf('iPhone') !== -1) {
totalTopHeight = 64
}
vm.globalData.statusBarHeight = res.statusBarHeight
vm.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
},
failure() {
vm.globalData.statusBarHeight = 0
vm.globalData.titleBarHeight = 0
}
})
},
JS:
onReady: function () {
const vm = this
vm.setData({
statusBarHeight: getApp().globalData.statusBarHeight,
titleBarHeight: getApp().globalData.titleBarHeight
})
},
HTML:
<view class="container" style="padding-top:{{statusBarHeight+titleBarHeight}}px">
<view class="header">
<view class="status-bar" style="height:{{statusBarHeight}}px"></view>
<view class="title-bar" style="height:{{titleBarHeight}}px">
<input type='text' confirm-type="search" class="input-text" placeholder-class="place-holder" placeholder='搜索你想要的商品' bindconfirm="search" bindinput="getval" style='width:60%;height:50rpx;padding:0 0 0 32rpx;margin-left:20rpx;font-size:20rpx;border-radius:6rpx;background:#999;'/>
</view>
</view>
</view>
CSS:
page {
height: 100%;
}
.container {
box-sizing: border-box;
height: 100%;
background: rgba(0, 255, 0, 0.1);
}
.header {
position: fixed;
top: 0;
width: 100%;
background: rgba(0, 0, 255, 0.1);
}
.status-bar {
background: rgba(255, 0, 0, 0.1);
}
.title-bar {
display: flex;
justify-content: space-between;
align-items: center;
}