自定义头部导航
app.json中设置:"navigationStyle": "custom";
js代码:
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代码:
<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>
样式:
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;
}