微信小程序全屏模式（自定義導航欄）

要自定義導航欄，首先需要在app.json裏設置：

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

設置之後進入小程序就只剩下右上角的膠囊了。

在設置導航欄樣式時需要知道它的高度，在app.json的onLaunch裏獲取狀態欄高度：

App({
    onLaunch: function(options) {
        wx.getSystemInfo({
            success: (res) => {
                this.globalData.statusBarHeight = res.statusBarHeight
                this.globalData.navBarHeight = 44 + res.statusBarHeight
            }
        })
    },
    globalData: {
        statusBarHeight: 0,
        screenHeight: 0
    }
})

44是導航欄除去狀態欄的高度，單位px。

因爲導航欄每個頁面都會用到，所以我們用組件會方便使用一些，這裏創建一個叫nav的組件：

首先在組件js裏設置statusBarHeight和一個可以通過外部設置狀態欄顏色的backgroundColor的屬性，默認透明。

nav.js:

const app = getApp()
Component({
    options: {
        multipleSlots: true
    },
    properties: {
        backgroundColor:{
            type: String,
            value: 'rgba(0,0,0,0)'
        }
    },
    data: {},
    ready() {
        let {
            statusBarHeight,
            navBarHeight
        } = app.globalData;

        this.setData({
            statusBarHeight,
            navBarHeight
        })
    },
    methods: {
        back() {
            wx.navigateBack({
                delta:1
            })
        }
    }
})

content裏放置內容，返回按鈕固定在左邊。

nav.wxml:

<view class='nav-wrap' style="background-color:{{bgColor}};">
    <view style="height:{{statusBarHeight}}px;"></view>
    <view class='content'>
        <slot name="content"></slot>
        <view class='back' bindtap='back'></view>
    </view>
</view>

nav.wxss:

.nav-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    z-index: 1;
}

.content {
    position: relative;
    width: 100%;
    height: 44px;
}

.back {
    position: absolute;
    left: 0;
    top: 0;
    width: 88px;
    height: 44px;
    background: pink;
}

在頁面中使用：

<nav bgColor="black">
    <view slot="content">
        <view class='txt'>Nav title</view>
    </view>
</nav>
<view>page content</view>

效果圖：

這裏txt裏的樣式、內容都是可以自定義的，如果想要使用通用樣式，可以寫在組件裏。

比如把導航欄title放在組件裏，通過外部傳值設置：

nav.js:

Component({
    // ...
    properties: {
        title:{
            type: String,
            value: ''
        }
    },
    // ...
})

nav.wxml:

<view class='nav-wrap' style="background-color:{{bgColor}};">
    <view style="height:{{statusBarHeight}}px;"></view>
    <view class='content'>
        <view class="title">{{title}}</view>
        <view class='back' bindtap='back'></view>
    </view>
</view>

nav.wxss:

/* ... */
.title {
    color: white;
    text-align: center;
    line-height: 44px;
    font-weight: 500;
}
/* ... */

調用<nav bgColor="black" title="hello">就可以了。

在第一次使用nav組件的頁面代碼中，page content是看不見的，因爲是直接從狀態欄開始顯示的，被nav擋住了。

這裏可以加一個高度爲導航欄高度的view當做頂部padding：

nav.wxml

<view class='nav-wrap' style="background-color:{{bgColor}};">
    <view style="height:{{statusBarHeight}}px;"></view>
    <view class='content'>
        <view class="title">{{title}}</view>
        <view class='back' bindtap='back'></view>
    </view>
</view>
<view wx:if="{{hastop}}" class='padding' style="width:100;height:{{navBarHeight}}px;"></view>

這裏在properties裏設置了一個hastop，用來控制是否有頂部padding。

頁面中：

<nav bgColor="black" title="Nav title" hastop></nav>
<view>page content</view>

這樣就可以顯示出來了：

導航欄背景圖

還可以做導航欄背景圖，添加一個image，絕對定位放置在nav-wrap底部：

nav.wxml

<view class='nav-wrap' style="background-color:{{bgColor}};">
    <image class='bgimg' wx:if="{{bgsrc}}" src='{{bgsrc}}' mode='aspectFill'></image>
    <view style="height:{{statusBarHeight}}px;"></view>
    <view class='content'>
        <view class='title'>{{title}}</view>
        <view class='back' bindtap='back'></view>
    </view>
</view>
<view wx:if="{{hastop}}" class='padding' style="width:100;height:{{navBarHeight}}px;"></view>

nav.wxss

.bgimg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

頁面：

<nav bgColor="black" title="Nav title" hastop bgsrc="/images/bg.jpeg"></nav>
<view>page content</view>

全屏背景

將bgColor、hastop、bgsrc都去掉，在頁面中放置一個position: fixed;，並且鋪滿全屏的圖片。

<nav title="Nav title"></nav>
<image class='pagebg' src='/images/bg.jpeg' mode='aspectFill'></image>

back的內容自定義就行了，我這裏只是簡單放置了一個色框。

注意事項

官方文檔中的注意事項：

• 注1：HexColor（十六進制顏色值），如"#ff00ff"
• 注2：關於navigationStyle
  • 客戶端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。
  • 客戶端 6.7.2 版本開始，navigationStyle: custom 對 <web-view> 組件無效
  • 開啓 custom 後，低版本客戶端需要做好兼容。開發者工具基礎庫版本切到 1.7.0（不代表最低版本，只供調試用）可方便切到舊視覺