微信小程序 自定义头部导航栏 navigationStyle

使用方法；Demo下载文章底部

一、公共参数设置

app.js

//获取当前设备状态栏高度
App({
    onLaunch: function() {
        wx.getSystemInfo({
            success: res => {
                this.statusBarHeight = res.statusBarHeight
            }
        })
    },
    statusBarHeight: 0,
    globalData: {
        userInfo: null
    }
})

app.json

"window": {
    "navigationStyle": "custom"
},

app.wxss

/* 自定义标题栏 */
.gw_navbarTop {
    width: 100vw;
    background-color: #fff;
    position: fixed;
    z-index: 4;
}
​
.gw_navbarTop .gw_title-container {
    height: 44px;
    display: flex;
    align-items: center;
    position: relative;
}
​
.gw_navbarTop .gw_capsule {
    padding: 0 5px;
    /* margin-left: 10px; */
    margin-left: 30rpx;
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
​
.gw_navbarTop .gw_capsule>view {
    width: 32px;
    height: 75%;
    position: relative;
}
​
.gw_navbarTop .gw_capsule>view:nth-child(2) {
    height: 75% !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}
​
.gw_navbarTop .gw_capsule image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
​
.gw_navbarTop_baoCunBtn {
    height: 100% !important;
    margin: 0 auto;
    font-size: 16px;
    text-align: center;
    line-height: 22px;
}
​
.gw_navbarTop_baoCunBtn_text {
    padding-left: 6px;
}
​
.gw_navbarTop .gw_navbarTop_title {
    position: absolute;
    left: 104px;
    right: 104px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

二、当前使用页面配置

index.js

const app = getApp()
const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px'
​
Page({
  data: {
      navigationBarHeight: (app.statusBarHeight + 44) + 'px',
      gw_navbarTop: [{
          navigationBarTitle: '系统首页',   //页面标题，为空时可在页面加载时自定义，默认居中超出隐藏
          statusBarHeight: app.statusBarHeight + 'px',
          navigationBarHeight: (app.statusBarHeight + 44) + 'px',
          onLeft: 'onQR',   //左-图标点击事件
          onRight: 'onQR',  //右-图标点击事件,单个图标按钮时可删除此项
          alone: true,  //是否单个按钮，true/是---false/否
          btnText: '',  //右文字按钮,此项不可删除，alone为true是此项可为空，为false是不可为空
          onImgLeft: '../../img/navbar_erweima.svg',    //左-按钮图标，测试svg格式最友好
          onImgRight: '../../../img/navbar_sousuo.svg', //右-按钮图标,右侧为文字时可删除
      }],
  },
    onLoad: function (e) {
        //自定义页面标题
        console.log(e)
        let gw_navbarTop = this.data.gw_navbarTop
        for (let i in gw_navbarTop) {
            gw_navbarTop[i].navigationBarTitle = e.name + '设置配置'
        }
        this.setData({
            gw_navbarTop
        })
    },
})

index.wxml

<!-- 引用模板 -->
<import src="/template/gw_navbarTop/gw_navbarTop" />
<block wx:for="{{gw_navbarTop}}" wx:key="id">
    <template is="gw_navbarTop" data="{{...item}}" />
</block>
​
<!-- page-conten 在wxss中设置绝对定位属性即可 -->
<view class="page-conten" style="{{'top:' + navigationBarHeight}}">
    <view>你好，我的世界！我是页面主体内容</view>
</view>

三、模板文件

gw_navbarTop.wxml

<template name="gw_navbarTop">
    <view class="gw_navbarTop" style="{{'height: ' + navigationBarHeight}}">
        <view style="{{'height: ' + statusBarHeight}}"></view>
        <view class='gw_title-container'>
            <view class='gw_capsule {{alone?"gw_capsule_alone":""}}'>
                <view class="iconLeft" bindtap='{{onLeft}}'>
                    <image src='{{onImgLeft}}'></image>
                </view>
                <block wx:if="{{!alone}}">
                    <view class='gw_navbarTop_baoCunBtn' bindtap='{{onRight}}' style="width: {{btnText !== ''?'45px':''}};">
                        <block wx:if="{{btnText !== ''}}">
                            <text class="gw_navbarTop_baoCunBtn_text">{{btnText}}</text>
                        </block>
                        <block wx:else>
                            <image src='{{onImgRight}}'></image>
                        </block>
                    </view>
                </block>
            </view>
            <view class='gw_navbarTop_title'>{{navigationBarTitle}}</view>
        </view>
    </view>
</template>

gw_navbarTop.wxss

代码就是app.wxss的样式代码
Demo下载：https://iweb-web.oss-cn-shanghai.aliyuncs.com/GW/navigationStyle.zip