微信小程序系列九：自定义导航栏

自定义头部导航

app.json中设置："navigationStyle": "custom"；

js代码：

[code]var 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
}
})

wxml代码：

[code]<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">
<view class="back-btn">返回</view>
<view>标题</view>
<view class="tablet"></view>
</view>
</view>
<view class="body">
<view class="scroll-content">
<view class="item" wx:for="{{50}}" wx:key="{{index}}">{{item}}</view>
</view>
</view>
</view>

样式：

[code]
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;
}

.title-bar .back-btn, .title-bar .tablet {
width: 116px; /* 保持一致使标题居中 */
}

.title-bar .tablet { /* 可优化 */
/* box-sizing: border-box; */
/* padding-left: 1em; */
}

.body {
height: 100%;
overflow: auto;
}

.scroll-content {
text-align: center;
}

.scroll-content .item {
height: 60rpx;
line-height: 60rpx;
border-bottom: 1rpx solid #eee;
}