<template name="head"> <!-- 头部内容 --> <view class="headBoxBox" :style="{height: headHeight + 'px'}"> <view class="headBox" :style="{height: headHeight + 'px',background:'#'+ bgColor}"> <!-- 状态栏 --> <view class="state" :style="{height: statusHeight + 'px'}"></view> <!-- 导航栏 --> <view class="nav" :style="{height: navHeight + 'px'}"> <!-- 返回按钮 --> <view :class="[backBtnColor ? 'backBtnWhite' : 'backBtnBlack']" v-if="backBtn" @click="backDefault"> </view> <!-- 顶部标题 --> <view class="title" v-if="showTitle"> {{title}} </view> </view> </view> </view> </template> <script> export default { name: "head", data() { return { headHeight: '', //状态栏高度 statusHeight: '', //导航栏高度 navHeight: '', // 胶囊高度 ellipse: '', }; }, props: { //背景色 bgColor: String, // 标题 title: String, //内容 showTitle: Boolean, //显隐 // 返回按钮 backBtnColor: Boolean, //颜色 默认黑色 true为白色 backBtn: Boolean, // 按钮显隐 howBack: Boolean, //返回方式 默认返回上一页 true为自定义返回页面 customURL: String, //自定义返回路径 绝对路径 }, mounted() { // 设备信息 let detail = uni.getSystemInfoSync() // 获取设备的系统 let system = detail.system //获取状态栏高度 this.statusHeight = detail.statusBarHeight // 胶囊信息 let ellipse = uni.getMenuButtonBoundingClientRect() //获取胶囊高度 this.ellipse = ellipse.height //获取胶囊距顶部距离 let absTop = ellipse.top //计算导航栏高度 = (胶囊距顶部距离 - 状态栏高度) * 2 + 胶囊高度 this.navHeight = (absTop - this.statusHeight) * 2 + this.ellipse //计算整体高度 let cheack = /iOS/ //判断设备型号 if (cheack.test(system)) { // iOS this.headHeight = this.statusHeight + this.navHeight + 4 } else { //Android this.headHeight = this.statusHeight + this.navHeight } }, methods: { //返回上一页 backDefault() { if (this.howBack) { uni.reLaunch({ url: this.customURL }) console.log("请填写指定路径"); console.log(this.customURL); } else { uni.navigateBack({ delta: 1 }) } }, //地址跳转 toAddress() { let that = this uni.authorize({ scope: 'scope.userLocation', success() { uni.navigateTo({ url: that.newAddress }) }, fail(err){ console.log(err) that.$emit('alertModel',true) } }) }, //监听输入内容 iptContent(e){ // console.log(e) this.$emit('getChild',e) let val = e.detail.value if(/^[\x00-\xff]/.test(val)){ let v = { first:val } this.$myRequest('/api/index/cit',v).then(res =>{ this.$emit('getRes',res) }) }else{ let v = { shortname:val } this.$myRequest('/api/index/keywords',v).then(res =>{ this.$emit('getRes',res) }) } } }, } </script> <style> .headBoxBox { width: 100%; } .headBox, .state, .nav { width: 750rpx; } /* 头部整体内容 */ .headBox { position: fixed; top: 0; left: 0; z-index: 100; } /* 状态栏 */ .state { position: relative; } /* 导航栏 */ .nav { display: flex; align-items: center; position: relative; } /* 搜索框 */ .search { width: 400rpx; border-radius: 200rpx; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-55%, -50%); background: rgba(255, 255, 255, 0.8); } .searchTwo { padding-left: 32rpx; width: 448rpx; border-radius: 200rpx; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 50%; left: 48%; transform: translate(-60%, -50%); background: rgba(247, 248, 250, 0.8); } .searchImg { width: 32rpx; height: 32rpx; } .search>input { width: 60rpx; color: #323233; } .searchTwo>input { color: #323233; margin-left: 8rpx; } .placeholder { color: #969799; text-align: center; font-size: 28rpx; } .placeholderTwo { font-size: 28rpx; color: #C8C9CC; } .backBtnBlack { margin-left: 32rpx; right: 50rpx; top: 150rpx; content: ""; display: inline-block; height: 20rpx; width: 20rpx; border-width: 0 0 2px 2px; border-color: #000; border-style: solid; transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); } .backBtnWhite { margin-left: 32rpx; right: 50rpx; top: 150rpx; content: ""; display: inline-block; height: 20rpx; width: 20rpx; border-width: 0 0 2px 2px; border-color: #fff; border-style: solid; transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); } .bottomBtn { right: 50rpx; top: 150rpx; content: ""; display: inline-block; height: 16rpx; width: 16rpx; border-width: 0 2px 2px 0; border-color: #fff; border-style: solid; transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); } .address { display: flex; align-items: center; margin-left: 32rpx; } .addressText { color: #fff; font-weight: 600; width: 96rpx; overflow: hidden; white-space: nowrap; } .title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .overdian{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } </style>