header.vue 1.91 KB
<template>
	<view>
		<view style="position: fixed;width: 100%;z-index: 9;">
			<view :style="{ height: navheight + 'px',background:'#0069FF'}" ></view>
			<view class="indexNav">
				<text class="left" @tap="lClick">{{leftText}}</text>
				<image :src="leftImgSrc" class="lImg"  @tap="lClick"></image>
				{{title}}
				<span class="right" @tap="rClick">{{rightText}}</span>
				<image :src="rightImgSrc" class="rImg"  @tap="rClick"></image>
			</view>
		</view>
		<view class="blanks">
		</view>
		<view :style="{ height: navheight + 'px'}" >
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navheight:0
			}
		},
		created(){
			uni.getStorage({
				key:'statusBarH',
				success:(res)=>{
					if(res.data){
						this.navheight=res.data;
					}
				}
			})
		},
		props:{
			leftText:{
				type:String,
				default:''
			},
			rightText:{
				type:String,
				default:''
			},
			leftImgSrc:{
				type:String,
				default:''
			},
			rightImgSrc:{
				type:String,
				default:''
			},
			title:{
				type:String,
				default:''
			}
		},
		methods: {
			rClick() {
				this.$emit('rightClick')
			},
			lClick(){
				this.$emit('leftClick')
			}
		}
	}
</script>

<style>
	.indexNav{
		height: 77.89upx;
		line-height: 77.89upx;
		text-align: center;
		background: #0069FF;
		position: fixed;
		font-size:33upx;
		color:rgba(255,255,255,1);
		width: 100%;
		z-index: 9;
	}
	.blanks{
		height: 77.89upx;
	}
	.left{
		float: left;
		font-size:25.37upx;
		display: inline-block;
		height: 77.89upx;
		line-height: 77.89upx;
		padding-left: 23.55upx;
	}
	.right{
		position: absolute;
		font-size:25.37upx;
		display: inline-block;
		height: 77.89upx;
		line-height: 77.89upx;
		right: 21.73upx;
	}
	.lImg{
		width: 12.68upx;
		height: 23.55upx;
		float: left;
		position: relative;
		top: 27.17upx;
	}
	.rImg{
		width: 28.98upx;
		height: 28.98upx;
		top: 27.17upx;
		right: 18.12upx;
		position: absolute;
	}
</style>