支付宝小程序自定义头部组件
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,
})