template-project/components/status-navs/status-nav.vue

<template>
    <view class="status-box" :style="{marginBottom: marginBottom + 'rpx'}">
		<!-- 网络、电量栏 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]" :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:Number,
				default:1
			},
			//标题颜色
            titleColor:{
                type:String,
                default:'#333333'
            },
			// 标题是否居中
			ifCenter: {
				type:Boolean,
				default: true
			},
			// 底部距离内容多高
			marginBottom: {
				type:String,
				default:'20'
			},
        },
		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,
					success: (res) => {},fail: (err) => {
						uni.reLaunch({
							url:'/pages/tabbar/pagehome/pagehome'
						})
					}
				})
			}
		}
    }
</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%;height: 50px; 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>