85 lines
2.7 KiB
Vue
85 lines
2.7 KiB
Vue
<template>
|
|
<view class="status-box statusHNH">
|
|
<view :style="{height:statusBarHeight+'px',background:backgroudColor}"></view>
|
|
<view class="status-nav" :style="{background:backgroudColor}">
|
|
<!-- 返回键 -->
|
|
<view @tap="backEvent" v-if="statusBack" style="height: 33rpx;width: 80rpx;flex-shrink: 0;position: absolute;">
|
|
<image class="tab-back" src="/static/public/backBlackm.png"></image>
|
|
</view>
|
|
<!-- 标题 -->
|
|
<!-- <view v-if="statusTitle" :class="statusBack ? 'tcenter' : 'tleft'" class="tab-title" :style="{color:tabcolor}">{{titleVal}}</view> -->
|
|
<view v-if="statusTitle" class="tab-title tcenter" :style="{color:tabcolor}">{{titleVal}}</view>
|
|
<view v-else class="tab-title tcenter" :style="{color:tabcolor}"> </view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:'status-nav',
|
|
props:{
|
|
statusTitle:{//是否显示标题
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
statusBack:{//是否显示返回键
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
backgroudColor:{//标题栏背景颜色
|
|
type:String,
|
|
default:'#FFFFFF'
|
|
},
|
|
tabcolor:{//标题颜色
|
|
type:String,
|
|
default:'#333333'
|
|
},
|
|
titleVal:{//标题内容
|
|
type:String,
|
|
default:'恒美植发'
|
|
},
|
|
whereCome:{//来自哪个页面
|
|
type:Number,
|
|
default:0
|
|
}
|
|
},
|
|
mounted() {
|
|
// 缓存状态栏+标题栏的高度
|
|
const query = wx.createSelectorQuery().in(this)
|
|
query.select('.statusHNH').boundingClientRect((rect) => {
|
|
// console.log('状态栏+标题栏：',rect.height);
|
|
uni.setStorageSync('statusHNH',rect.height)
|
|
}).exec()
|
|
},
|
|
data() {
|
|
return {
|
|
statusBarHeight:uni.getSystemInfoSync().statusBarHeight,//获取手机状态栏高度
|
|
};
|
|
},
|
|
methods:{
|
|
backEvent(){//返回事件
|
|
if(this.whereCome==1){
|
|
uni.reLaunch({
|
|
url:'/pages/tabbar/pagehome/pagehome'
|
|
})
|
|
} else if(this.whereCome==2){
|
|
uni.reLaunch({
|
|
url:'/pages/tabbar/my/my'
|
|
})
|
|
} else {
|
|
uni.navigateBack({delta:1})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.status-box{position: fixed;top: 0;left: 0;right: 0;z-index: 10;}
|
|
.status-nav{width: 100%;position: relative;padding: 30rpx 0;display: flex;align-items: center;}
|
|
.tab-back{width: 33rpx;height: 33rpx;flex-shrink: 0;position: absolute;left: 20rpx;}
|
|
.tab-title{font-size: 36rpx;font-weight: bold;color: #333333;width: 100%;}
|
|
.tcenter{text-align: center;}
|
|
.tleft{margin-left: 40rpx;}
|
|
</style>
|