flying-monkey/components/status-navs/status-nav-slot.vue

192 lines
4.6 KiB
Vue
Raw Normal View History

2022-03-16 00:58:52 +00:00
<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'}">
<!-- 返回键 -->
<slot name="leftContent">
<view class="return-box" @tap="backEv" v-if="ifReturn"
:style="{height: navBarHeight+'px'}">
</view>
</slot>
2022-03-16 00:58:52 +00:00
<!-- 标题 -->
<view class="tab-title" v-if="ifTitle && ifNet"
:style="{
color: titleColor,
justifyContent: ifCenter ? 'center' : '',
padding: ifCenter ? '0px' : `${ifReturn ? '0 38' : '0 15'}px`}">
<view class="title-box" :class="['','clips1','clips2'][clipNumber]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">
<slot name="centerContent">{{navBarTitle}}</slot>
</view>
</view>
<!-- 右边功能 -->
<view class="right-box">
<slot name="rightContent"></slot>
</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.getSystemInfoSync().statusBarHeight,
ifNet:true ,// 是否有网络
netText:'当前无网络',
netTimer:null
}
},
mounted() {
// 网络监测
this.$toolAll.tools.networkStatus();
// 缓存状态栏+标题栏的高度
// const query = wx.createSelectorQuery().in(this)
// query.select('.statusHNH').boundingClientRect((rect) => {
// uni.setStorageSync('statusHNH',rect.height)
// }).exec();
// 获取当前页面路径
this.$toolAll.tools.obtainUrl();
this.$toolAll.tools.obtainUrlParam();
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(){
if(uni.getStorageSync('outside')*1==2){
this.fromWhere = uni.getStorageSync('outside')*1;
}
switch (this.fromWhere){
case 1:
case 2:
uni.navigateTo({
url:'/pages/tabbar/pagehome/pagehome'
})
uni.setStorageSync('outside',0)
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;
justify-content: space-between;
align-items: center;
height: 50px;
line-height: 50px;
padding: 0 30rpx;
box-sizing: border-box;
}
.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: 38rpx;
display: flex;
}
.tab-title .title-box{margin-top: -4rpx;}
.right-box {flex-shrink: 0;font-size: 30rpx;}
</style>