小程序自定義導航欄

小程序app.json中有一個配置可以自定義導航欄，只保留右上角膠囊按鈕

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "navigationStyle":"custom" // 導航欄樣式，僅支持以下值：default 默認樣式,custom 自定義導航欄，只保留右上角膠囊按鈕
  }
}

navigationStyle不設置或者設置為default的時候頁面是這樣的：

設置"navigationStyle":"custom"之后，頁面是這樣的：

可以看到，此時微信的頭部已經沒有了，只保留了右上角膠囊部分，接下來實現自定義頭部組件
因為每個人的項目需求都不一樣，這里只講我個人學習實現的簡單組件，具體樣式和功能還需要各位根據實際情況自己實現
首先創建組件文件目錄，如圖：

header.json中需要聲明這是一個組件：

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

header.wxml中是組件的dom結構：

<view class='wx-header of {{isShadow}}' style="color:{{color}};padding-top:{{headerPaddingTop}};background:{{background}}">
  <view class='fl t-center icon iconfont {{icon_left}}' bindtap='_iconLeftTap'></view>
  <view class='fl title'>{{title}}</view>
</view>

header.wxss中是組件的樣式代碼:

@import '../../app.wxss';
@import '../../iconfont/iconfont.wxss';

.wx-header{
  height: 44px;width: 100%;position: fixed;z-index: 9999;
  line-height: 44px;box-sizing: content-box;
  }
.shadow{box-shadow: 0 4px 4px #eee;}
.wx-header .title{height: 44px;padding-left: 10px;font-size: 30rpx;}
.wx-header .icon{height: 44px;width:44px;font-size: 22px;}

app.wxss中定義的樣式組件中是不能直接使用的，需要引入，考慮到頭部一般需要返回箭頭或者其他的圖標，這里引入了iconfont文件，關於小程序引入字體圖標，將在下一篇文章中講到。
接來下是最主要的header.js,組件的屬性，方法都在這里定義：

//獲取應用實例
const app = getApp();

Component({
  options: {
    multipleSlots: true, // 在組件定義時的選項中啟用多slot支持
  },
  /* 組件的屬性列表*/
  properties: {
    title: {            // 屬性名
      type: String,     // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: '標題'     // 屬性初始值（可選），如果未指定則會根據類型選擇一個
    },  
    icon_left:{         // icon 類名,默認左箭頭
      type:String,
      value:'icon-return'
    },
    background: {       // 背景色
      type: String,
      value: '#fff'
    },
    color: {             // icon及title色值
      type: String,
      value: '#000'
    },
    isShadow:{          // 是否有陰影,默認無背景
      type: String,
      value:''
    },
    headerPaddingTop: { // 動態獲取設備狀態欄高度
      type: String,
      value: app.globalData.statusBarHeight + 'px'
    },
    goUrl: {            // icon點擊跳轉路徑，默認回退
      type: String,
      value: ''
    }
  },
  data:{
    // 組件顯示控制
    // isShow: false
  },
  /*組件的方法列表*/
  methods: {
    //隱藏彈框
    _iconLeftTap() {
      console.log('左邊icon點擊了');
      console.log(this.data.goUrl);
      if (this.data.goUrl != '' && this.data.goUrl != undefined){
        wx.navigateTo({
          url: this.data.goUrl
        })
      }else{
        wx.navigateBack();
      }
    },
    /*內部私有方法建議以下划線開頭 triggerEvent 用於觸發事件*/
    _error() {
      //觸發取消回調
      this.triggerEvent("error")
    }
  }
})

 

頁面中使用組件的方法如下：

json文件中聲明引入的組件，以index.json為例：

{
  "navigationBarTitleText":"首頁",
  "usingComponents": {
    "header": "/components/header/header"
  }
}

index.wxml中使用組件：

<!--index.wxml-->
<view class="container">
  <header
    title='首頁'
    icon_left='icon-message'
    background='transparent'
    color="#fff"
    isShadow='shadow'    
    goUrl='../product/search/search'>
  </header>
</view>

效果如下圖：

另：也可以引用頁面的js文件中獲取組件的實例，在js中調用組件的方法，比如點擊按鈕觸發彈框組件，具體方法如下：

1、頁面中使用組件的時候定義一個id

<!--index.wxml-->
<view class="container">
  <header
    id="index_header"
    title='首頁'
    icon_left='icon-message'
    color="#fff"
    isShadow='shadow'    
    goUrl='../product/search/search'>
  </header>
</view>

2、js中通過id獲取組件實例

onReady:function(){
    this.header = this.selectComponent("#index_header");
    this.header._iconLeftTap();
}

當然點擊按鈕顯示彈框這種功能也可以通過操作數據控制彈框的顯示隱藏，具體還要根據場景來看哪種方法更加合適。

本篇文章就寫到這里，如有表述不准確之處，歡迎指正，歡迎補充，感謝閱讀。