main
liudan
1 year ago
parent
65d02d53fc
commit
aa0b3bb48e
@ -0,0 +1,171 @@ |
||||
<template> |
||||
<view class="navbar" :style="{height:statusBarHeight+navBareight +'px'}"> <!-- 如若不写 高度始终为44 没有找到原因 --> |
||||
<view class="narbar-flexd"> |
||||
<view :style="{height:statusBarHeight+'px',background:''}"></view> |
||||
<view :class="isCenter?'narbar-content':'isCenter'" :style="{height:navBareight+'px'}" > |
||||
|
||||
<!-- 左侧返回按钮 --> |
||||
<view class="left" @click="onBack" v-if="back&&toIndex" :style="[{color},{paddingTop}]"> |
||||
<u-icon name="arrow-left" size="20"></u-icon> |
||||
<!-- <uni-icons type="arrowleft" size="25" :color='color' ></uni-icons> --> |
||||
<!-- <u--image :showLoading="true" src="https://bsl-lj-rent.oss-cn-shanghai.aliyuncs.com/idn-mac/indexs/lianxi.png" width="60rpx" height="71rpx" @click="click"></u--image> --> |
||||
</view> |
||||
<!-- 不去扫码返回按钮 --> |
||||
<view class="left" @click="onBackIndex" v-if="back&&!toIndex" :style="[{color},{paddingTop}]"> |
||||
<u-icon name="arrow-left" size="20"></u-icon> |
||||
<!-- <uni-icons type="arrowleft" size="25" :color='color' ></uni-icons> --> |
||||
<!-- <u--image :showLoading="true" src="https://bsl-lj-rent.oss-cn-shanghai.aliyuncs.com/idn-mac/indexs/lianxi.png" width="60rpx" height="71rpx" @click="click"></u--image> --> |
||||
</view> |
||||
<view class="title"> |
||||
{{title}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="navHeight" :style="{height:statusBarHeight+navBareight +'px'}"></view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
statusBarHeight:20, |
||||
navBareight: 45, |
||||
windowWidth: 375, |
||||
}; |
||||
}, |
||||
props:{ |
||||
title:{ // 标题文字(默认为空) |
||||
type:String, |
||||
default:'#fff' |
||||
}, |
||||
toIndex:{ |
||||
type:Boolean, |
||||
default:true |
||||
}, |
||||
color:{ // 标题和返回按钮颜色(默认白色) |
||||
type:String, |
||||
default:'#222' |
||||
}, |
||||
//建议使用background 因为使用backgroundColor，会导致不识别渐变颜色 |
||||
background:{ // 背景颜色(不传值默认透明) |
||||
type:String, |
||||
default:'transparent' |
||||
}, |
||||
back:{ // 是否显示返回按钮(不传值默认不显示) |
||||
type:Boolean, |
||||
default:false |
||||
}, |
||||
isCenter:{//是否中间 |
||||
type:Boolean, |
||||
default:true |
||||
} |
||||
}, |
||||
|
||||
created() { |
||||
//获取手机系统信息 -- 状态栏高度 |
||||
let { |
||||
statusBarHeight, |
||||
windowWidth |
||||
} = uni.getSystemInfoSync() |
||||
this.statusBarHeight = statusBarHeight |
||||
this.windowWidth = windowWidth |
||||
//去除 |
||||
//#ifndef H5 || MP-ALIPAY ||APP-PLUS |
||||
//获取小程序胶囊的高度 |
||||
let { |
||||
top, |
||||
bottom, |
||||
left |
||||
} = uni.getMenuButtonBoundingClientRect() |
||||
//高度 =（胶囊底部高低-状态栏高度）+（胶囊顶部高度-状态栏内的高度） |
||||
this.navBareight = (bottom - statusBarHeight) + (top - statusBarHeight) |
||||
this.windowWidth = left |
||||
//#endif |
||||
}, |
||||
|
||||
methods: { |
||||
// 左侧返回按钮调用 |
||||
onBack() { |
||||
this.$emit("onBack"); |
||||
uni.navigateBack({ |
||||
delta:1,//返回层数，2则上上页 |
||||
}) |
||||
|
||||
}, |
||||
onBackIndex(){ |
||||
uni.switchTab({ |
||||
url:'/pages/index/index' |
||||
}) |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.navbar { |
||||
background-color: #19B459; |
||||
// background-image: url('https://bsl-lj-rent.oss-cn-shanghai.aliyuncs.com/idn-mac/index/90.png') !important; |
||||
// background-size: 100% 100% !important; |
||||
.narbar-flexd { |
||||
// background-image: url('https://bsl-lj-rent.oss-cn-shanghai.aliyuncs.com/idn-mac/index/90.png') !important; |
||||
background-size: 100% 100% !important; |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: 99; |
||||
width: 100%; |
||||
// padding-bottom: 10rpx; |
||||
.narbar-content { |
||||
// height: 45px; |
||||
padding: 0 24upx; |
||||
// margin-bottom: 10px; |
||||
display: flex; |
||||
box-sizing: border-box; |
||||
justify-content:center; |
||||
align-items: center; |
||||
background-color: #19B459; |
||||
|
||||
.left{ |
||||
position: absolute; |
||||
left: 5%; |
||||
font-weight: 600; |
||||
} |
||||
.title{ |
||||
font-size: 36rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #ffffff; |
||||
} |
||||
|
||||
} |
||||
.isCenter{ |
||||
// height: 45px; |
||||
padding: 0 24upx; |
||||
// margin-bottom: 10px; |
||||
display: flex; |
||||
box-sizing: border-box; |
||||
justify-content:flex-start; |
||||
align-items: center; |
||||
.left{ |
||||
position: absolute; |
||||
left: 5%; |
||||
font-weight: 600; |
||||
} |
||||
.title{ |
||||
font-size: 36rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #222222; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
.navHeight { |
||||
height: 60px; |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 12 KiB |
Loading…
Reference in new issue