小程序自定義單頁面、全局導航欄的實現代碼

<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
 <view style="{{'height: ' + statusBarHeight}}"></view>
 <view class='title-container'>
 <view class='capsule' wx:if="{{ back || home }}">
 <view bindtap='back' wx:if="{{back}}">
 <image src='/images/back.png'></image> 
 </view>
 <view bindtap='backHome' wx:if="{{home}}">
 <image src='/images/home.png'></image>
 </view>
 </view>
 <view class='title'>{{text}}</view>
 </view>
</view>
<view style="{{'height: ' + navigationBarHeight}};background: white;"></view>

.navbar {
 width: 100%;
 background-color: #1797eb;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
}
.title-container {
 height: 40px;
 display: flex;
 align-items: center;
 position: relative;
}
.capsule {
 margin-left: 10px;
 height: 30px;
 background: rgba(255, 255, 255, 0.6);
 border: 1px solid #fff;
 border-radius: 16px;
 display: flex;
 align-items: center;
}
.capsule > view {
 width: 45px;
 height: 60%;
 position: relative;
.capsule > view:nth-child(2) {
 border-left: 1px solid #fff; 
}
.capsule image {
 width: 50%;
 height: 100%;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
}
.title {
 color: white;
 position: absolute;
 top: 6px;
 left: 104px;
 right: 104px;
 height: 30px;
 line-height: 30px;
 font-size: 14px;
 text-align: center;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

const app = getApp()

Component({

 properties: {
 text: {
 type: String,
 value: 'Wechat'
 },
 back: {
 type: Boolean,
 value: false
 },
 home: {
 type: Boolean,
 value: false
 }
 },
 data: {
 statusBarHeight: app.globalData.statusBarHeight + 'px',
 navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
 },

 methods: {
 backHome: function () {
 let pages = getCurrentPages()
 wx.navigateBack({
 delta: pages.length
 })
 },
 back: function () {
 wx.navigateBack({
 delta: 1
 })
 }
 }
})

{
 "component": true,
 "usingComponents": {}
}