支付宝小程序自定义头部组件

支付宝小程序自定义头部组件

view

<view class="nav-header" style="height:{{navbarData.isFloat?0:statusBarHeight+titleBarHeight}}px">
  <view class="nav-top">
    <image a:if="{{navbarData.isBgImg}}" src="/images/user-bg.png" class="headder-bg" style="width:100%;height:{{statusBarHeight+titleBarHeight}}px;"></image>
    <view class="nav-status-bar" style="height:{{statusBarHeight}}px"></view>
    <view class="nav-title-bar" style="height:{{titleBarHeight}}px">
      <view class="nav-left">
        <slot name="header-left"></slot>
      </view>
      <view class="nav-title-text" style="line-height:{{titleBarHeight}}px;">
        <text>{{navbarData.title}}</text>
      </view>
    </view>
  </view>
</view>

js

const app = getApp()
Component({
  props: {
    navbarData: {}
  },
  data: {
    statusBarHeight: '',
    titleBarHeight: ''
  },
  didMount: function () {
    this.setData({
      statusBarHeight: app.globalData.statusBarHeight,
      titleBarHeight: app.globalData.titleBarHeight
    })
  },
  methods: {

  }

})

css

.nav-header{
  width: 100%;
}
.nav-top{
  width: 100%;
  height: auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  background: transparent;
}
.nav-status-bar{
  width: 100%;
  background: transparent;
}
.nav-title-bar{
  width: 100%;
  position: relative;
  background: transparent;
}
.nav-title-text{
  width: 100%;
  /* font-size: 40rpx; */
  color: white;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.nav-title-text text{
  position: relative;
  top: 6rpx;
}
.nav-left{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.headder-bg{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1
}

实战：

组件上使用

  <navbar navbar-data="{{nvabarData}}" />

// 引用
    nvabarData: {
      isFloat: true,
      title: '喜刷' //导航栏 中间的标题
    },
    height: '',


 onLoad() {
    // 获取用户数据
    this.setData({
      height: app.globalData.statusBarHeight + app.globalData.titleBarHeight,
    })