微信小程序自定义头部导航栏

可以看一下这一篇点我

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、效果