微信小程序 自定义header 组件

使用header组件

 

  <header>   //css 写在当前page页面下
    <image class="leftIcon" src="/file/leftIcon.png" bindtap="backFun"></image>
    <text class="title" bindtap="backFun">标题</text>
  </header>

 

WXML代码

<view class="header" style="padding-top:{{paddingTop}}px;height:{{lineHeight}}px">
  <slot></slot>
</view>

WXSS代码

.header{
  background-color: #ffffff;
  padding-bottom: 18rpx;
  width: 100%;
  z-index: 999;
  padding-left: 30rpx;
  display: flex;
  align-items: center;
}

JS代码

const app=getApp();
Component({
  properties: {

  },
  data: {

  },
  lifetimes: {
    attached: function() {
      let {height,top} = wx.getMenuButtonBoundingClientRect();
      let lineHeight=height
      let paddingTop=top
      this.setData({
        lineHeight,paddingTop
      })
    }
  },
  methods: {

  }
})