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