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

约定不等于承诺〃 2022-12-08 15:59 468阅读 0赞

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

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>

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
    }

实战：

组件上使用

// 引用
        nvabarData: {
          isFloat: true,
          title: '喜刷' //导航栏 中间的标题
        },
        height: '',
    
    
     onLoad() {
        // 获取用户数据
        this.setData({
          height: app.globalData.statusBarHeight + app.globalData.titleBarHeight,
        })