微信小程序自定義頭部導航欄

可以看一下這一篇點我

1、在app.json中定義

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

---

2、在app.js中獲取各個型號手機頂部導航和狀態欄(電量/信號/時間)的高度

    wx.getSystemInfo({
      //1.獲取機器信息
      //2.計算標題欄高度（screenHeight-windowHeight）
      //3.iphone:64,iphneX:88,acdroid:68 
      success:(res)=>{
        //console.log(res,'???')
        this.globalData.platform=res.platform;
        let totalTopHeight=68;
        if (res.model.indexOf('iPhone X') !== -1){
          totalTopHeight=88;
          //console.log(totalTopHeight,'11')
        }else if(res.model.indexOf('iPhone')!==-1){
          totalTopHeight=64;
          //console.log(totalTopHeight,'000')
        }
        this.globalData.statusBarHeight = res.statusBarHeight;
        this.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight;
        //console.log(res.statusBarHeight,'sssssssssss')
        //console.log(totalTopHeight - res.statusBarHeight, 'ttttt')
      },
      fail(){
        this.globalData.statusBarHeight=0;
        this.globalData.titleBarHeight=0;
      }
    })

---

3、在component中創建一個頂部導航欄組件，命名（topNav）(命名自己隨便取)

1.在topNav.json中添加

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

---

2.navTop.wxml

<!--公共自定義頭部導航欄-->
<view style="padding-top:{{statusBarHeight+titleBarHeight}}px;background-color:#ffffff">
  <view class="hh-header">
    <view class="status-bar" style="height:{{statusBarHeight}}px"></view>
    <view class="title-bar" style="height:{{titleBarHeight}}px">
      <view wx:if="{{isShowBack=='true'}}" class='hh-nav-back ico-back' bindtap='goback'></view>
      <view wx:if="{{isShowBack=='false'}}" class='hh-nav-back'></view>
      <view class="go-back">
        <image bindtap="onClick_goBack" src="../../images/close.png" wx:if="{{showBack}}"></image>
        <view class="hh-title">{{title}}</view>
      </view>
      <view class="hh-nav-right"></view>
    </view>
  </view>
</view>

---

3.topNav.js

// component/navTop.js
const app=getApp();
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    title:{//組件接收一個title參數
      type:String,
      value:''
    },
    showBack:{//組件接收一個是否顯示返回按鈕的boolean值得參數
      type:Boolean,
      value:true
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
    statusBarHeight: app.globalData.statusBarHeight,
    titleBarHeight: app.globalData.titleBarHeight,
    isShowBackBtn:true
  },

  /**
   * 組件的方法列表
   */
  methods: {
    onClick_goBack(){
      wx.navigateBack({
        delta:1
      })
    }
  }
})

---

4.topNav.wxss

/* component/navTop.wxss */
.go-back image{
  width: 35rpx;
  height: 35rpx;
}
.go-back{
  display: flex;
  align-items: center;
}
.ico-back{
  width: 36rpx;
  height: 36rpx;
  background-size: contain;
  /* background-image: url()*/
  background-repeat: no-repeat;
  background-position-x: 20rpx;
}
.hh-header {
  position: fixed;
  top: 0;
  width: 100%;
  /* background-color: #14ae66; */
  z-index: 99;
}
.hh-title{
  font-size: 30rpx;
  text-align: center;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hh-nav-right{
  width: 116px;
}
.hh-nav-back{
  width: 116px;

}
.status-bar,.title-bar{
  background-color: #fff;
}

---

4、使用自定義的頭部導航組件

比如在首頁(index頁面)使用

---

1.在index.json中引入

{
  "usingComponents": {
    "top-nav":"../../component/navTop/navTop"
  }
}

---

2.index.wxml

<top-nav title="{{indexTitle}}" showBack="{{isShowBackBtn}}"></top-nav>

---

3.index.js

Page({
	data:{
		isShowTop:false,//是否顯示返回按鈕的Boolean參數
		indexTitle:'首頁標題'
	}
})

---

5、效果