自定义导航栏头部 并简单设置标题和返回按键

wx.ml

<view class="concact_index">
  <view class="ai_top"
    style='height:{{titleBarHeight}}rpx;line-height:{{titleBarHeight}}rpx;padding-top:{{statusBarHeight}}rpx;padding-bottom:30rpx'>
    <view class="return" bindtap="returnpre"
      style="top:{{statusBarHeight}}rpx;height:{{titleBarHeight}}rpx;line-height:{{titleBarHeight}}rpx"></view>
    联系我们
  </view>
</view>

wx.ss

.concact_index .ai_top .return {
  position: absolute;
  left: 34rpx;
  width: 18rpx;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAiCAYAAABStIn6AAABiUlEQVRIS63WXUtUURTG8f9jn8LP5K0yI8qQ1kTmiBFpoChlQRCKXnbvjTeiEARBEIEgggVe+jXyLXvxkRnODMtxxjNntufywPqddfZea68tEh7b74BjSZvq17G9AjwGDMz1BdleBp6GJLYKQ7YXgemAbAOzhSDbr+pBAdkFapKueoZsvwReBOQT8EzS//q7niDbz4H5gHyur5Gkf813uZDtGrAQkC9ANSK5GdmeApYC8hV4JOlve9l0zch2FXgTAr4BE5L+dKq9jpDtSeBtWMPvwENJl90K+BZkuwK8D8geUJH0+64uuAHZHgM+BGQfGJd0kddKLch2CVgDBrKgA2BM0nke0to128PARkAOgVFJZ70gDcj2EPAReJAF/cyQk16RJvQDGMyCjoCSpF9FkHuHOv1aWdJpkawau2Z7BFhPWuzmV22XgdWk7Q9YekEGLL1FApbetAF7ArxOOkYCln6wBSz9qA1Y+uEfsPRxFLD2AbkDzBQakAFLH9kBS79EBCz9WhOw1kXrGsyLw+VkbTDqAAAAAElFTkSuQmCC') left center no-repeat;
  background-size: 100% 34rpx;
}

.concact_index .ai_top {
  background:pink;
  position: fixed;
  top: 0px;
  z-index: 99;
  left: 0px;
  width: 100%;
  font-size: 34rpx;
  text-align: center;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #fff;
  /* background: linear-gradient(90deg, #00BE7D 0%, #2EDDA3 100%); */
}

.concact_index {
  height: 100vh;
  width: 100%;
  padding: 30rpx 34rpx;
  padding-top: 0px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #00BE7D 0%, #2EDDA3 100%);
}

wx.js

// task/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    statusBarHeight: 40, //状态栏高度
    titleBarHeight: 88, //标题栏高度
    windowHeight: 0, //屏幕高度
    windowWidth: 0, //屏幕高度,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var systemInfo = wx.getSystemInfoSync()
    this.setData({
      windowHeight: systemInfo.windowHeight,
      windowWidth: systemInfo.windowWidth,
    })
    this.onGetSystemInfo();
  },
  onGetSystemInfo: function () {
    let _this = this
    const res = wx.getSystemInfoSync()
    _this.setData({
      windowHeight: res.windowHeight,
      windowWidth: res.windowWidth
    })
    _this.setData({
      statusBarHeight: res.statusBarHeight * 2,
    });
    var isiOS = res.system.indexOf('iOS') > -1;

    if (!isiOS) {
      _this.setData({
        titleBarHeight: 96,
      });
    } else {
      _this.setData({
        titleBarHeight: 88,
      });
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wx.json

  {
  "usingComponents": {},
   "navigationStyle":"custom"
}