onLaunch() {
? ? // 展示本地存儲能力
? ? const logs = wx.getStorageSync('logs') || []
? ? logs.unshift(Date.now())
? ? wx.setStorageSync('logs', logs)
? ? // 獲取系統(tǒng)信息
?? ?this.globalData.systemInfo = wx.getSystemInfoSync();
?? ?// 獲取狀態(tài)欄高度
?? ?this.globalData.statusBarHeight = this.globalData.systemInfo.statusBarHeight
?? ?// 膠囊按鈕位置信息
?? ?this.globalData.menuButtonInfo = wx.getMenuButtonBoundingClientRect();
?? ?// 獲取導航欄高度
?? ?this.globalData.navBarHeight = this.globalData.menuButtonInfo.bottom + (this.globalData.menuButtonInfo.top - this.globalData.statusBarHeight)
},

globalData: {
? ? statusBarHeight: '',
? ? menuButtonInfo: {},
? ? navBarHeight:'',
? ? systemInfo:''
? },

properties: {
?? ?// 是否顯示返回箭頭
? ? showBackArrow: {
? ? ? ? type: Boolean,
? ? ? ? value: true
? ? },
? ? // 是否自定義導航欄標題
? ? customTitle: {
? ? ? ? type: Boolean,
? ? ? ? value: false
? ? },
? ? // 導航欄標題
? ? title: {
? ? ? ? type: String,
? ? ? ? value: 'weixin'
? ? },
? ? // 是否自定義返回方法
? ? customBack: {
? ? ? ? type: Boolean,
? ? ? ? value: false
? ? }
},
data: {
?? ?navBarHeight:getApp().globalData.navBarHeight,
? ? statusBarHeight:getApp().globalData.statusBarHeight,
? ? menuButtonInfo:getApp().globalData.menuButtonInfo
},
methods: {
? ? /** ?點擊返回按鈕 */
? ? back() {
? ? ? ? if (this.data.customBack) {
? ? ? ? ? ? this.triggerEvent('back')
? ? ? ? } else {
? ? ? ? ? ? wx.navigateBack({
? ? ? ? ? ? ? ? delta: 0,
? ? ? ? ? ? })
? ? ? ? }
? ? },
? ? /** 點擊導航欄標題事件 */
? ? clickTitle(){
? ? ? ? this.triggerEvent('clickTitle')
? ? },
}

<view class="nav-bar" style="height:{{navBarHeight}}px;">
? ? <view style="height:{{statusBarHeight}}px;"></view>
? ? <view style="height:{{navBarHeight-statusBarHeight}}px;width:{{menuButtonInfo.left}}px;" class="nav-box">
? ? ? ? <view class="back-arrow" wx:if="{{showBackArrow}}">
? ? ? ? ? ? <van-icon name="arrow-left" color="#262626" size="40rpx" bindtap="back"></van-icon>
? ? ? ? </view>
? ? ? ? <view class="nav-title" style="width: {{showBackArrow?'calc(100% - 40rpx)':'100%'}};">
? ? ? ? ? ? <text wx:if="{{!customTitle}}" bindtap="clickTitle">{{title}}</text>
? ? ? ? ? ? <slot wx:if="{{customTitle}}"></slot>
? ? ? ? </view>
? ? </view>
</view>
<view style="height:{{navBarHeight}}px;"></view>

.nav-bar{
? ? width: 100%;
? ? position: fixed;
? ? top: 0;
? ? left: 0;
? ? background-color: #ffffff;
? ? z-index: 1000000;
}

.nav-box{
? ? padding: 0 20rpx;
? ? display: flex;
? ? align-items: center;
}

.back-arrow{
? ? width: 60rpx;
? ? height: 100%;
? ? display: flex;
? ? align-items: center;
? ? padding-top: 4rpx;
}

.nav-title{
? ? height: 100%;
? ? display: flex;
? ? align-items: center;
? ? font-size: 36rpx;
? ? color: #262626;
? ? font-weight: 600;
}

"window": {
? ? ? ? "navigationStyle": "custom"
? ? },
? ? "usingComponents": {
? ? ? ? "navigation-bar":"/components/navigation-bar/navigation-bar",
? ? }

<navigation-bar title="打卡" customBack bind:back="backWorkPage"></navigation-bar>