效果如下隨意變換：（隨便拿了星巴克小程序圖，侵刪）

navbar-for-wxapp

一、如何實(shí)現(xiàn)

1. index.js

/*
 * @Author: mtonhuang
 * @Feature: 小程序自定義導(dǎo)航欄組件 
 */

Component({
    properties: {
        titleText: { //導(dǎo)航欄文字
            type: String,
            value: '導(dǎo)航欄'
        },
        backgroundImg: { //背景圖片路徑
            type: String,
            value: ''
        },
        backIcon: { //返回按鈕
            type: String,
            value: ''
        },
        homeIcon: { //房子按鈕
            type: String,
            value: ''
        }
    },
    attached: function(){
        const self = this;
        self.getSysmInfo();
    },
    data: {

    },
    methods: {
        getSysmInfo: function() {
            const self = this;
            wx.getSystemInfo({
                success: function(res) {
                    let isIos = res.system.indexOf('iOS') > -1;
                    let status = res.statusBarHeight;
                    self.setData({
                        navHeight: isIos ? 44 : 48,
                        status: status
                    })
                }
            })
        },
        back: function(){
            this.triggerEvent('back')
        },
        home: function() {
            this.triggerEvent('home');
        }
    }
})

復(fù)制代碼

2. index.wxml

<view class="nav" style="height: {{status + navHeight}}px">
    <view class="index-banner" wx:if="{{backgroundImg}}">
        <image class="index-banner__cover" mode="scaleToFill" src="{{backgroundImg}}"></image>
    </view>
    <view class="status" style="height: {{status}}px;"></view>
    <view class="navbar" style="height:{{navHeight}}px;">
        <view class="capsule" style="{{backIcon ? '' : 'width: 152rpx;margin-left: 24rpx'}}">
            <view class="back-icon" wx:if="{{backIcon}}" bindtap="back">
                <image class="imag_back" src="{{backIcon}}"></image>
            </view>
            <view class="home-icon" wx:if="{{homeIcon}}" bindtap="home" style="{{backIcon ? '' : 'left: 84.2rpx'}}">
                <image class="imag_home" src="{{homeIcon}}"></image>
            </view>
        </view>
        <view class="nav-title" wx:if="{{titleText}}">
            <text>{{titleText}}</text>
        </view>
    </view>
</view>
復(fù)制代碼

{
    "navigationStyle": "custom", //自定義導(dǎo)航欄，必填
    "usingComponents": {
        "nav-bar": "../../components/navBar/navBar" //引入我們的組件
    }
}
復(fù)制代碼

• 給頁(yè)面的最大父級(jí) padding-top
• 引入組件，名稱為 index.json 中自定義的組件名稱 nav-bar
• 根據(jù)自己需要配置 背景圖，回退 icon，小房子按鈕，標(biāo)題文字等

<view class="page" style="padding-top: {{height + status}}px">
  <nav-bar
  bindback="back"
  bindhome="home"
  backIcon="../../assets/img/svg/back.svg"
  homeIcon="../../assets/img/svg/home.svg"
  titleText="這是自定義導(dǎo)航欄"
  backgroundImg="test.png"
  backIcon="../../assets/img/svg/back_default.svg">
  </nav-bar>
</view>
復(fù)制代碼

onLoad() {
        let that = this;
        wx.getSystemInfo({
            success: function(res) {
                let isIos = res.system.indexOf('iOS') > -1;
                let status = res.statusBarHeight;
                that.setData({
                    height: isIos ? 44 : 48,
                    status: status
                })
            }
        })
    }
復(fù)制代碼

4. 【選填】事件 back 或者 home

// 根據(jù)業(yè)務(wù)需求
back: function () {
    wx.reLaunch({
        url: '../index/index'
    })
}
home: function () {
    wx.reLaunch({
        url: '../index/index'
    })
}
復(fù)制代碼

5.【選填】讀者也可以自定義字體顏色等，寫法就不再贅述

Contributor

• mtonhuang

當(dāng)然，喜歡的話，請(qǐng)不要吝嗇您的start for my github blog，Thanks?(?ω?)?