152 lines
4.2 KiB
Vue
152 lines
4.2 KiB
Vue
<template>
|
|
<view class="status-box" :style="{marginBottom: marginBottom}">
|
|
<!-- 网络、电量栏 start -->
|
|
<view :style="{height: statusBarHeight+'px',background: backgroudColor}"></view>
|
|
<!-- 网络、电量栏 end -->
|
|
|
|
<!-- 头部状态栏 start -->
|
|
<view class="status-nav" :style="{background: backgroudColor,height:navBarHeight}">
|
|
<!-- 返回键 start -->
|
|
<view class="disjcac left-box" @tap="backEv" v-if="ifReturn" :style="{height: navBarHeight}" >
|
|
<slot name="leftcontent">
|
|
<i class="icon icon-return" style="font-size: 38rpx;" :style="{color: returnColor}"></i>
|
|
</slot>
|
|
</view>
|
|
<!-- 返回键 end -->
|
|
|
|
<!-- 标题 start -->
|
|
<view class=" tab-title "
|
|
:style="{
|
|
color: titleColor,
|
|
justifyContent: ifCenter ? 'center' : '',
|
|
padding: ifCenter ? '0px' : `${ifReturn ? '0 38' : '0 15'}px`}">
|
|
<view class="title-box" :class="['','clips1','clips2'][clipNumber*1]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">
|
|
<!-- 有网络 -->
|
|
<view v-if="ifTitle && ifNet" >{{navBarTitle}}</view>
|
|
<!-- 无网络 -->
|
|
<view v-if="!ifNet">{{netText}}<text @tap="refreshEv" style="color: #3875F6;margin-left: 20rpx;">刷新</text></view>
|
|
</view>
|
|
</view>
|
|
<!-- 标题 end -->
|
|
|
|
<!-- 右侧图标 start -->
|
|
<view class="right-box disjcac" :style="{height: navBarHeight}">
|
|
<slot name="rightcontent"></slot>
|
|
</view>
|
|
<!-- 右侧图标 end -->
|
|
</view>
|
|
<!-- 头部状态栏 end -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:'status-nav',
|
|
props:{
|
|
//状态栏、导航栏背景颜色
|
|
backgroudColor:{
|
|
type:String,
|
|
default:'#FFFFFF'
|
|
},
|
|
// 默认导航栏高度
|
|
navBarHeight: {
|
|
type:String,
|
|
default:'50px'
|
|
},
|
|
//是否显示返回键
|
|
ifReturn:{
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
// 返回键颜色
|
|
returnColor: {
|
|
type:String,
|
|
default:'#000'
|
|
},
|
|
//是否显示标题
|
|
ifTitle:{
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
// 导航栏标题
|
|
navBarTitle: {
|
|
type:String,
|
|
default:''
|
|
},
|
|
// 标题最多几行显示
|
|
clipNumber: {
|
|
type:String,
|
|
default:'1'
|
|
},
|
|
//标题颜色
|
|
titleColor:{
|
|
type:String,
|
|
default:'#333333'
|
|
},
|
|
// 标题是否居中
|
|
ifCenter: {
|
|
type:Boolean,
|
|
default: true
|
|
},
|
|
// 底部距离内容多高
|
|
marginBottom: {
|
|
type:String,
|
|
default:'20rpx'
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
|
ifNet:true ,// 是否有网络
|
|
netText:'当前无网络',
|
|
netTimer:null
|
|
}
|
|
},
|
|
mounted() {
|
|
// 网络监测
|
|
this.$toolAll.tools.networkStatus();
|
|
// 获取当前页面路径
|
|
this.$toolAll.tools.obtainPagePath();
|
|
setTimeout(()=>{
|
|
this.ifNet = uni.getStorageSync('isNet');
|
|
},500)
|
|
},
|
|
methods:{
|
|
// 刷新网络事件
|
|
refreshEv(){
|
|
this.netText = '正在刷新...';
|
|
let outTime = 0;//十秒超时
|
|
this.netTimer = setInterval(()=>{
|
|
outTime++;
|
|
this.$toolAll.tools.networkStatus();
|
|
if(uni.getStorageSync('isNet')) {
|
|
clearInterval(this.netTimer);
|
|
this.ifNet = true;
|
|
}
|
|
if(outTime==10) {
|
|
clearInterval(this.netTimer);
|
|
this.netText = '刷新失败';
|
|
outTime = 0;
|
|
}
|
|
},1000)
|
|
},
|
|
//返回事件
|
|
backEv(){
|
|
uni.navigateBack({delta:1})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.disjcac{display: flex;justify-content: center;align-items: center;}
|
|
.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: sticky;top: 0;left: 0;right: 0;z-index: 10;}
|
|
.status-nav{width: 100%;position: relative;display: flex;align-items: center;}
|
|
.left-box {position: absolute;padding: 0 20rpx;}
|
|
.right-box {position: absolute;right: 0; padding: 0 20rpx;}
|
|
.tab-title {width: 100%;font-size: 32rpx;display: flex;font-weight: bold;}
|
|
.tab-title .title-box {margin-top: -4rpx;}
|
|
</style>
|