<view class="navigation-bar" style="height:{
{navHeight}}px;background:{
{backgroundColor}}">
<view class="navigation-container" style="height:{
{capsule.height + 2*gapHeight}}px">
<view class="navigation-left">
<view class="navigation-back" wx:if="{
{showBack}}" catchtap="goBack">
<i-icon name="sleft" size="32" color="#000000" class="icon-sright"></i-icon>
</view>
<view wx:else class="slect-view" >
<image class="punchicon" wx:if="{
{!userInfo.userId}}"
bind:tap="logined" src="{
{punchurlinner}}"></image>
<image wx:else class="punchicon" bind:tap="logined" src="{
{punchurlinner}}"></image>
</view>
</view>
<view class="title" v-if="{
{title}}" style="width:{
{width>0 ? width+'rpx' : 'auto'}};">{
{
title}}</view>
</view>
</view>
<view style="height:{
{navHeight}}px;"></view>
.navigation-bar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 98;
background-repeat: no-repeat;
background-size: 750rpx;
.navigation-container {
position: absolute;
width: 100%;
bottom: 0;
display: flex;
box-sizing: border-box;
z-index: 99;
justify-content: center;
align-items: center;
.title {
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: black;
letter-spacing: 2rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.navigation-left {
position: absolute;
top: 0;
left: 0;
height: 100%;
display: flex;
.slect-view {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 30rpx;
.slect-item {
position: relative;
height: 48rpx;
line-height: 48rpx;
background: #f0f0f0;
border-radius: 8rpx;
font-size: 28rpx;
font-weight: 400;
color: #313836;
padding: 0 17rpx;
display: inline-block;
display: flex;
.item-name {
display: inline-block;
max-width: 170rpx;
margin-right: 18rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.icon-caret {
position: relative;
width: 16rpx;
height: 19.5rpx;
top: 18rpx;
}
}
.punchicon{
width: 86rpx;
height: 66rpx;
}
}
.navigation-back {
height: 100%;
width: 96rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
const app = getApp();
Component({
properties: {
title: {
type: String,
value: '',
},
backgroundColor: {
type: String,
value: '#FFFFFF'
},
bgurl:{
type: String,
value: '',
},
showBack: {
type: Boolean,
value: false
},
punchurl:{
type: Boolean,
value: false
},
userId: {
type: String,
value: ''
}
},
observers: {
bgurl: function (val) {
this.setData({
bginnerurl: val,
});
},
punchurl: function (val) {
if(val===true){
this.setData({
punchurlinner: '/signhomeicon.png',
});
}else{
this.setData({
punchurlinner: 'signedicon.png',
});
}
},
},
data: {
navHeight: 0,
bginnerurl:'',
punchurlinner:'',
userInfo:{
}
},
async attached() {
// console.log(this.data.list.INTENT_AREA.range.city)
const res = app.globalData.systemInfo;
this.setData({
windowWidth: res.windowWidth,
capsule: res.capsule,
gapHeight: res.capsule.top - res.statusBarHeight,
navHeight: res.capsule.bottom + res.capsule.top - res.statusBarHeight,
hinttop: res.capsule.top,
});
const {
userInfo } = await app.get(['userInfo', 'openId'])
this.setData({
userInfo
})
app.watch('userInfo', userInfo => {
this.setData({
userInfo
})
})
},
methods: {
goBack(){
this.triggerEvent('closepage')
},
logined(){
this.triggerEvent('logined')
}
}
});
Mini personalización del encabezado de navegación del programa
Supongo que te gusta
Origin blog.csdn.net/sinat_36017053/article/details/123347611
Recomendado
Clasificación