<template>
|
|
<view class="comm-navbar position-fixed top-0 vw-100" :style="{background: backgroundColor}">
|
|
<!-- 状态栏 -->
|
|
<view class="status-bar-height"></view>
|
|
<view class="navbar flex justify-center align-center">
|
|
<view class="nav-icon">
|
|
<slot></slot>
|
|
<u-icon v-if="back" class="bakc" :style="{color: textColor}" @click="handleBack" name="arrow-left"></u-icon>
|
|
</view>
|
|
<view class="nav-text" :style="{color: textColor}">{{ text }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
text: {
|
|
type: String
|
|
},
|
|
textColor: {
|
|
type: String,
|
|
default: '#333'
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: 'transparent'
|
|
},
|
|
back: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
backNum: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
},
|
|
methods: {
|
|
handleBack () {
|
|
uni.navigateBack({
|
|
delta: this.backNum
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.comm-navbar {z-index: 999;
|
|
.navbar {height: 80rpx;width: 100%;padding: 0 32rpx;}
|
|
.nav-text {font-size: 36rpx;}
|
|
.nav-icon {position: absolute;left: 32rpx;}
|
|
.bakc {font-size: 36rpx}
|
|
}
|
|
</style>
|