hengmei-one/components/status-nav.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>