You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
4.3 KiB
173 lines
4.3 KiB
1 year ago
|
<template>
|
||
|
|
<view class="navbar"> <!-- 如若不写 高度始终为44 没有找到原因 -->
|
||
|
|
<view class="narbar-flexd">
|
||
|
|
<view :style="{height:statusBarHeight+'px',background:'#ffffff'}"></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'
|
||
|
|
},
|
||
|
|
paddingTop:{
|
||
|
|
type:String,
|
||
|
|
},
|
||
|
|
//建议使用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: #ffffff;
|
||
|
|
// 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: #ffffff;
|
||
|
|
.left{
|
||
|
|
position: absolute;
|
||
|
|
left: 5%;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #222222;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.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>
|