149 lines
3.6 KiB
Vue
149 lines
3.6 KiB
Vue
<template>
|
||
<view class="status-box statusHNH">
|
||
<!-- 网络、电量栏 start -->
|
||
<view :style="{height: statusBarHeight+'px',background: backgroudColor}"></view>
|
||
<!-- 网络、电量栏 end -->
|
||
|
||
<!-- 头部状态栏 start -->
|
||
<view class="status-nav"
|
||
:style="{background: backgroudColor,height: navBarHeight+'px'}">
|
||
<!-- 返回键 -->
|
||
<view class="return-box" @tap="backEv" v-if="ifReturn"
|
||
:style="{height: navBarHeight+'px'}">
|
||
<i class="icon icon-return"
|
||
:style="{color: returnColor}"></i>
|
||
</view>
|
||
<!-- 标题 -->
|
||
<view class="tab-title" v-if="ifTitle"
|
||
:style="{
|
||
color: titleColor,
|
||
justifyContent: ifCenter ? 'center' : '',
|
||
padding: ifCenter ? '0px' : `${ifReturn ? '0 38' : '0 15'}px`}">
|
||
<view :class="['','clips1','clips2'][clipNumber]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">{{navBarTitle}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 头部状态栏 end -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name:'status-nav',
|
||
props:{
|
||
//状态栏、导航栏背景颜色
|
||
backgroudColor:{
|
||
type:String,
|
||
default:'#FFFFFF'
|
||
},
|
||
// 默认导航栏高度
|
||
navBarHeight: {
|
||
type:Number,
|
||
default:50
|
||
},
|
||
//是否显示返回键
|
||
ifReturn:{
|
||
type:Boolean,
|
||
default:true
|
||
},
|
||
// 返回键颜色
|
||
returnColor: {
|
||
type:String,
|
||
default:'#000'
|
||
},
|
||
//是否显示标题
|
||
ifTitle:{
|
||
type:Boolean,
|
||
default:true
|
||
},
|
||
// 导航栏标题
|
||
navBarTitle: {
|
||
type:String,
|
||
default:'佩丽商城'
|
||
},
|
||
// 标题最多几行显示
|
||
clipNumber: {
|
||
type:Number,
|
||
default:1
|
||
},
|
||
//标题颜色
|
||
titleColor:{
|
||
type:String,
|
||
default:'#333333'
|
||
},
|
||
// 标题是否居中
|
||
ifCenter: {
|
||
type:Boolean,
|
||
default: true
|
||
},
|
||
// 来自哪里
|
||
fromWhere: {
|
||
type:Number,
|
||
default:0
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
statusBarHeight: uni.getStorageSync('statusBar'),
|
||
}
|
||
},
|
||
mounted() {
|
||
// 缓存状态栏+标题栏的高度
|
||
// const query = wx.createSelectorQuery().in(this)
|
||
// query.select('.statusHNH').boundingClientRect((rect) => {
|
||
// uni.setStorageSync('statusHNH',rect.height)
|
||
// }).exec();
|
||
|
||
// 获取当前页面路径
|
||
let pages = getCurrentPages();
|
||
let route = pages[pages.length - 1].route;
|
||
this.log(route,'status-nav组件打印：当前页面路径')
|
||
},
|
||
methods:{
|
||
//返回事件
|
||
backEv(){
|
||
switch (this.fromWhere){
|
||
case 1:
|
||
uni.navigateTo({
|
||
url:'/pages/tabbar/pagehome/pagehome'
|
||
})
|
||
break;
|
||
case 0:
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||
|
||
.status-box{
|
||
position: fixed;top: 0;left: 0;right: 0;z-index: 10;
|
||
}
|
||
.status-nav{
|
||
width: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.return-box {
|
||
display: flex;justify-content: center;align-items: center;flex-shrink: 0;
|
||
position: absolute;
|
||
padding: 0rpx 10rpx;
|
||
}
|
||
.return-box i {font-size: 56rpx;}
|
||
.tab-title{
|
||
width: 100%;
|
||
font-size: 36rpx;font-weight: bold;
|
||
display: flex;
|
||
}
|
||
.tab-title view{margin-top: -4rpx;}
|
||
</style>
|