<!--components/navbar.wxml-->
<view class="navbar" style="height:{{navHeight+5}}px;background-image:url('{{imgUrl}}') ">
? <!-- 左上角 返回按鈕 和 home按鈕 wx:if="{{showNav}}" 是控制左上角按鈕的顯示隱藏，首頁不顯示 -->
? <view class="navbar_left" style="top:{{navTop}}px;height:{{jnheight-1}}px;width:{{jnwidth-3}}px" wx:if="{{showNav}}">
? ? <!-- 控制返回按鈕的顯示 -->
? ? <view class="navBack" bindtap="navBack">
? ? ? <image src="/images/back.png" mode="widthFix"></image>
? ? </view>
? ? <!-- home按鈕 wx:if="{{showHome}}" 是控制左上角 home按鈕的顯示隱藏-->
? ? <view class="nav_line" bindtap="navHome" wx:if="{{showHome}}">
? ? ? <image src="/images/index.png" mode="widthFix" style="width:50%"></image>
? ? </view>
? </view>
? <!-- 中間標題 -->
? <view class="navbar_title" style="top:{{navTop}}px;">{{pageName}}</view>
</view>

const App = getApp();
Component({
? // 組件的屬性列表
? properties: {
? ? pageName: String, //中間的title
? ? showNav: { //判斷是否顯示左上角的按鈕 ? ?
? ? ? type: Boolean,
? ? ? value: true
? ? },
? ? showHome: { //判斷是否顯示左上角的home按鈕
? ? ? type: Boolean,
? ? ? value: true
? ? },
? ? imgUrl:{//圖片背景路徑
? ? ? type: String,
? ? ? value: App.globalData.imgLink+'index.jpg',
? ? },
? },
? // 組件的初始數(shù)據(jù)
? data: {
? ? showNav: true, //判斷是否顯示左上角的home按鈕
? ? showHome: true, //判斷是否顯示左上角的按鈕

? },
? lifetimes: {
? ? // 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名
? ? attached: function() {
? ? ? this.setData({
? ? ? ? navHeight: App.globalData.navHeight, //導(dǎo)航欄高度
? ? ? ? navTop: App.globalData.navTop, //膠囊按鈕與頂部的距離
? ? ? ? jnheight: App.globalData.jnheight, //膠囊高度
? ? ? ? jnwidth: App.globalData.jnwidth //膠囊寬度
? ? ? })
? ? }
? },
? // 組件的方法列表
? methods: {
? ? //回退
? ? navBack: function() {
? ? ? wx.navigateBack()
? ? },
? ? //回主頁
? ? navHome: function() {
? ? ? wx.switchTab({
? ? ? ? url: '/pages/index/index'
? ? ? })
? ? },
? }
})

/* components/navbar.wxss */
.navbar {
? width: 100%;
? overflow: hidden;
? position: sticky;
? top: 0;
? left: 0;
? z-index: 10;
? flex-shrink: 0;
? background: #fff;
?
}

.navbar_left {
? display: -webkit-flex;
? display: flex;
? -webkit-box-align: center;
? -ms-flex-align: center;
? -webkit-align-items: center;
? align-items: center;
? position: absolute;
? left: 10px;
? z-index: 11;
? line-height: 1;
? border: 1rpx solid #f0f0f0;
? border-radius: 40rpx;
? overflow: hidden;
? background: rgba(255, 255, 255, 0.6);
}
.navBack image{
? width: 60%;
}
?
.navbar_left view {
? width: 50%;
? display: flex;
? align-items: center;
? justify-content: center;
}
?
.nav_line {
? border-left: 1rpx solid #f0f0f0;
}
?
.navbar_title {
? width: 100%;
? box-sizing: border-box;
? padding-left: 115px;
? padding-right: 115px;
? height: 32px;
? line-height: 32px;
? text-align: center;
? position: absolute;
? left: 0;
? z-index: 10;
? color: #333;
? font-size: 16px;
? font-weight: bold;
? text-overflow: ellipsis;
? overflow: hidden;
? white-space: nowrap;
}

// app.js
App({
? onLaunch() {
? ? //設(shè)置導(dǎo)航欄
? ? //獲取菜單按鈕的布局位置信息
? ? let menuButtonObject = wx.getMenuButtonBoundingClientRect();
? ? //獲取系統(tǒng)信息
? ? wx.getSystemInfo({
? ? ? success: res => {
? ? ? ? console.log('xxxx', res)
? ? ? ? //狀態(tài)欄的高度
? ? ? ? let statusBarHeight = res.statusBarHeight,
? ? ? ? ? //膠囊按鈕與頂部的距離
? ? ? ? ? navTop = menuButtonObject.top,
? ? ? ? ? navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
? ? ? ? let globalData = this.globalData;
? ? ? ? globalData.navHeight = navHeight;//導(dǎo)航欄高度
? ? ? ? globalData.navTop = navTop;//膠囊按鈕與頂部的距離
? ? ? ? globalData.jnheight = menuButtonObject.height;//膠囊的高度
? ? ? ? globalData.jnwidth = menuButtonObject.width;//膠囊的寬度
? ? ? ? globalData.screenHeight = res.screenHeight;//屏幕高度
? ? ? },
? ? ? fail(err) {
? ? ? ? console.log(err);
? ? ? }
? ? });

? },
? //設(shè)置全局對象
? globalData: {
? ? navHeight: 0,
? ? navTop: 0,
? ? jnheight: 0,
? ? jnwidth: 0,
? ? screenHeight: 0,
? }
})

?"window": {
? ? "backgroundTextStyle": "light",
? ? "navigationBarBackgroundColor": "#fff",
? ? "navigationBarTitleText": "Weixin",
? ? "navigationBarTextStyle": "black",
? ? "navigationStyle": "custom"
? },

{
? "usingComponents":{
? ? "navbar":"/components/navbar/navbar"
? }
}

<navbar page-name="{{navbar.shoppingName}}"></navbar>

Page({
? data:{
? ? navbar:{
? ? ? shoppingName:'首頁',
? ? },
? }