小程序UI（自定义Navbar）

组件代码

// app.js
App({onLaunch() {const systemInfo = wx.getSystemInfoSync();this.globalData.statusBarHeight = systemInfo.statusBarHeight;},globalData: {statusBarHeight: 0,}
})

header.wxml

<view class="header custom {{fixedTop?'fixed':''}}" style="padding-top:{{statusBarHeight}}px; background: {{background}}; z-index: 10"><view class="navigation" wx:if="{{nav}}"><navigator class="nav" hoverClass="none" openType="navigateBack" wx:if="{{canGoBack&&autoGoBack}}"><image src="https://nodestatic.fbstatic.cn/wxmini/imgs/back.png"></image></navigator><view bindtap="back" class="nav" wx:if="{{canGoBack&&!autoGoBack}}"><image src="https://nodestatic.fbstatic.cn/wxmini/imgs/back.png"></image></view><text wx:if="{{canGoBack&&!small}}">|</text><navigator class="nav" hoverClass="none" openType="reLaunch" url="../../pages/index/index" wx:if="{{!(small&&canGoBack)}}"><image src="https://nodestatic.fbstatic.cn/wxmini/imgs/home.png"></image></navigator></view><slot></slot><text class="title" style="margin-right: {{small?80:0}}rpx;color:#{{small?'3C464F':'000'}}" wx:if="{{showTitle}}">{{title}}</text>
</view>
<view class="{{!fixedTop?'fixed':''}}" style="height: calc({{statusBarHeight+44}}px)"></view>

CSS

.header {box-sizing: initial;color: #3c464f;font-size: 34rpx;font-weight: 700;height: 44px;line-height: 44px;position: relative;text-align: center
}.navigation {align-items: center;background: #fff;border: 1px solid #ebebeb;border-radius: 28px;bottom: 8px;color: #ebebeb;display: -webkit-flex;display: flex;font-weight: 100;height: 28px;justify-content: center;left: 15rpx;line-height: 0;position: absolute
}.header .navigation text {display: inline;flex: none;font-size: 16px;margin: 0
}.header .navigation image {height: 16px;width: 16px
}.header .nav {height: 16px;width: 38px
}.fixed {left: 0;position: fixed;right: 0;top: 0;z-index: -100
}.header .title {display: inline-block;max-width: 390rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap
}@media screen and (min-width:600px) {.header {font-size: 20px}
}

JS

const app = getApp();Component({options: {},properties: {title: {value: "",type: String},background: {value: "#fff",type: String},nav: {value: true,type: Boolean},fixedTop: {value: true,type: Boolean},small: {value: false,type: Boolean},showTitle: {value: true,type: Boolean},autoGoBack: {value: true,type: Boolean}},data: {statusBarHeight: app.globalData.statusBarHeight,canGoBack: false},attached: function () {this.setData({canGoBack: getCurrentPages().length > 1});},methods: {back: function () {this.triggerEvent("back");}}
});

使用

{"usingComponents": {"header": "../../components/header/header"}
}

index.wxml

<header title="关于我们"></header>

<header title="证件照首页" nav="{{false}}"></header>
<navigator class="about-us" hoverClass="none" style="top: calc({{statusBarHeight+22}}px - 24rpx)" url="../about-us/about-us"><image src="/static/icon-about-us.png"></image>
</navigator>

CSS

.about-us {left: 30rpx;position: fixed;z-index: 10
}.about-us,
.about-us image {height: 48rpx;width: 48rpx
}