小程序 block_微信小程序自定义导航条组件

类似知乎小程序的自定义导航条

首先将小程序的导航条设置为自定义状态，在app.json里把navigationStyle属性设置为custom

在文件区中创建自己的组件

json：

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

wxml:

<view class="main">
  <view class="statusBarHeight" style="height:{{statusBarHeight}}px"></view>
  <view class="wrapper">
    <view class="bg" style="{{headStyle}}">
      <view class="statusbg" style="height:{{statusBarHeight}}px"></view>
      <block wx:if="{{mode=='empty'}}">
        <view class="head"><slot></slot></view>
      </block>
      <block wx:else>
        <view class="head">
          <block wx:if="{{isHaveParent}}">
            <view class="left {{isEditHeadBg?'edit':''}}">
              <i bind:tap="ontap"></i>
              <label bind:tap="goHome"></label>
            </view>
          </block>
          <block wx:else>
            <view class="left home" bind:tap="goHome"></view>
          </block>
          <view class="headContent">
            <block wx:if="{{mode=='default'}}">
              <label>
                <slot></slot>
              </label>
            </block>
            <block wx:elif="{{mode=='search'}}">
              <view class="search">
                <slot></slot>
              </view>
            </block>
            <block wx:elif="{{mode=='address'}}">
              <navigator url="{{url}}">
                <view class="address">
                  <slot></slot>
                </view>
              </navigator>
            </block>
          </view>
        </view>
      </block>
    </view>
  </view>
</view>

wxss:

page .main {
  background: #ffffff;
  color: #111111;
}
page .main .statusBarHeight {
  width: 750rpx;
}
page .main .wrapper {
  display: block;
  width: 750rpx;
  height: 96rpx;
}
page .main .wrapper .bg {
  display: block;
  width: 690rpx;
  position: fixed;
  left: 0;
  top: 0;
  padding: 16rpx 30rpx 16rpx;
  z-index: 1000;
}
page .main .wrapper .bg .statusbg {
  height: 40rpx;
}
page .main .wrapper .bg .head {
  position: relative;
  text-align: center;
  height: 65rpx;
  line-height: 65rpx;
}
page .main .wrapper .bg .head .left {
  position: absolute;
  width: 174rpx;
  height: 64rpx;
  left: 0;
  top: 0;
  background: url('https://mianmianyue.oss-cn-shenzhen.aliyuncs.com/images%2Fapp%2Fcomponents%2Ficon-headop.png') no-repeat center center;
  background-size: 174rpx auto;
}
page .main .wrapper .bg .head .left i {
  display: block;
  height: 64rpx;
  width: 80rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1001;
}
page .main .wrapper .bg .head .left label {
  display: block;
  height: 64rpx;
  width: 80rpx;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1001;
}
page .main .wrapper .bg .head .edit {
  background: url('https://mianmianyue.oss-cn-shenzhen.aliyuncs.com/images%2Fapp%2Fcomponents%2Ficon-editopbg.png') no-repeat center center;
  background-size: 174rpx auto;
}
page .main .wrapper .bg .head .home {
  width: 87rpx;
  background: url('https://mianmianyue.oss-cn-shenzhen.aliyuncs.com/images%2Fapp%2Fcomponents%2Ficon-goHomePage.png') no-repeat center center;
  background-size: 87rpx auto;
}
page .main .wrapper .bg .head .headContent {
  display: inline-block;
  vertical-align: top;
}
page .main .wrapper .bg .head .headContent > label {
  display: block;
  font-size: 36rpx;
  max-width: 340rpx;
  height: 65rpx;
  text-align: center;
  line-height: 65rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
page .main .wrapper .bg .head .headContent .search {
  width: 300rpx;
  height: 65rpx;
  border-radius: 32rpx;
  background: #fafafa;
  position: relative;
}
page .main .wrapper .bg .head .headContent .search::before {
  content: '';
  width: 31rpx;
  height: 65rpx;
  display: inline-block;
  vertical-align: top;
  background: url('https://mianmianyue.oss-cn-shenzhen.aliyuncs.com/images%2Fapp%2Fcomponents%2Ficon-search.png') no-repeat center center;
  background-size: 31rpx auto;
  margin-right: 10rpx;
}
page .main .wrapper .bg .head .headContent .search label {
  display: inline-block;
  vertical-align: top;
  height: 65rpx;
  font-size: 28rpx;
  color: #999999;
  line-height: 65rpx;
}
page .main .wrapper .bg .head .headContent .search i {
  width: 300rpx;
  height: 65rpx;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
page .main .wrapper .bg .head .headContent .address {
  text-align: center;
  max-width: 340rpx;
  height: 65rpx;
  position: relative;
}
page .main .wrapper .bg .head .headContent .address::after {
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 23rpx;
  height: 65rpx;
  background: url('https://mianmianyue.oss-cn-shenzhen.aliyuncs.com/images/app/faceToFace/index/icon-bottom.png') no-repeat center center;
  background-size: 23rpx auto;
  margin-left: 10rpx;
}
page .main .wrapper .bg .head .headContent .address::before {
  content: '';
  display: inline-block;
  vertical-align: top;
  height: 65rpx;
  width: 28rpx;
  background: url('https://mianmianyue.oss-cn-shenzhen.aliyuncs.com/images/app/faceToFace/index/icon-addr.png') no-repeat center center;
  background-size: 28rpx auto;
  margin-right: 10rpx;
}
page .main .wrapper .bg .head .headContent .address label {
  max-width: 200rpx;
  display: inline-block;
  vertical-align: top;
  height: 65rpx;
  line-height: 65rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
page .main .wrapper .bg .head .headContent .address i {
  width: 100%;
  height: 65rpx;
  position: absolute;
  top: 0;
  left: 0;
}

js:

const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    mode: {
      type: 'string',
      value: 'default'
    },
    url: {
      type: 'string',
      value: ''
    },
    headStyle: {
      type: 'string',
      value: 'background: #ffffff;color: #111111;'
    },
    isEditHeadBg: {
      type: 'boolean',
      value: false
    },
    delta:{
      type:'number',
      value:1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    statusBarHeight: app.globalData.statusBarHeight,
    isHaveParent: true
  },
  /**
   * 组件生命周期函数，在组件实例进入页面节点树时执行
   */
  attached: function () {
    var self = this;
    var page = app.getParentPage();
    var isHaveParent = self.data.isHaveParent;
    if (page) {
      isHaveParent = true;
    } else {
      isHaveParent = false;
    }
    self.setData({
      isHaveParent
    })
  },

  /**
   * 组件的方法列表
   */
  methods: {
    ontap: function () { 
      var delta=this.data.delta
      wx.navigateBack({
        delta
      })
    },
    goHome: function () {
      wx.reLaunch({
        url: '/pages/home/index',
      })
    }
  },


})

因为现在手机刘海屏的缘故所以需获取状态栏的高度：

wx.getSystemInfo({
      success: function(res) {
        that.globalData.sdkVersion = res.SDKVersion
        that.globalData.iPhoneX = res.model.indexOf('iPhone X') >= 0
        that.globalData.mobileName = res.model;
        that.globalData.statusBarHeight = res.statusBarHeight;
      }
    })

wx.getSystemInfo()能够获取到手机的参数，拿到statusBarHeight就是能动态的适配刘海屏的高度了。

最后可以在需要的页面或者app.json中进行添加引用组件就好了

"usingComponents": {
    "my-component": "/pages/components/myHeader"
  },