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

自定义头部导航

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;
}