132 lines
3.3 KiB
Vue
132 lines
3.3 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+'rpx'}">
|
||
<!-- 返回键 -->
|
||
<view class="return-box" @tap="backEv" v-if="ifReturn"
|
||
:style="{height: navBarHeight+'rpx'}">
|
||
<i class="icon icon-return"
|
||
:style="{color: returnColor}"></i>
|
||
</view>
|
||
<!-- 标题 -->
|
||
<view class="tab-title" :class="['','clips1','clips2'][clipNumber]" v-if="ifTitle"
|
||
:style="{
|
||
color: titleColor,
|
||
textAlign: ifCenter ? 'center' : 'left',
|
||
padding: ifCenter ? '0px' : '0px 38px'}">
|
||
<text>{{navBarTitle}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 头部状态栏 end -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name:'status-nav',
|
||
props:{
|
||
//状态栏、导航栏背景颜色
|
||
backgroudColor:{
|
||
type:String,
|
||
default:'#FFFFFF'
|
||
},
|
||
// 默认导航栏高度
|
||
navBarHeight: {
|
||
type:Number,
|
||
default:110
|
||
},
|
||
//是否显示返回键
|
||
ifReturn:{
|
||
type:Boolean,
|
||
default:true
|
||
},
|
||
// 返回键颜色
|
||
returnColor: {
|
||
type:String,
|
||
default:'#000'
|
||
},
|
||
//是否显示标题
|
||
ifTitle:{
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
// 导航栏标题
|
||
navBarTitle: {
|
||
type:String,
|
||
default:'佩丽商城'
|
||
},
|
||
// 标题最多几行显示
|
||
clipNumber: {
|
||
type:Number,
|
||
default:1
|
||
},
|
||
//标题颜色
|
||
titleColor:{
|
||
type:String,
|
||
default:'#333333'
|
||
},
|
||
// 标题是否居中
|
||
ifCenter: {
|
||
type:Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
statusBarHeight: uni.getStorageSync('statusBar'),
|
||
}
|
||
},
|
||
mounted() {
|
||
// 缓存状态栏+标题栏的高度
|
||
const query = wx.createSelectorQuery().in(this)
|
||
query.select('.statusHNH').boundingClientRect((rect) => {
|
||
uni.setStorageSync('statusHNH',rect.height)
|
||
}).exec();
|
||
this.log(getApp().globalData.appletName,'status-nav组件打印');
|
||
|
||
// 获取当前页面路径
|
||
let pages = getCurrentPages();
|
||
let route = pages[pages.length - 1].route;
|
||
this.log(route,'status-nav组件打印：当前页面路径')
|
||
},
|
||
methods:{
|
||
//返回事件
|
||
backEv(){
|
||
this.log('返回事件')
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
padding: 0rpx;
|
||
}
|
||
.tab-title text{display: block;margin-top: -4rpx;}
|
||
</style>
|