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.
61 lines
1.3 KiB
61 lines
1.3 KiB
<template>
|
|
<view class="comm-navbar position-fixed top-0 w-100 left-0" :style="{background: backgroundColor, zIndex: zIndex}">
|
|
<!-- 状态栏 -->
|
|
<view class="statusBarHeight"></view>
|
|
<view class="navbar flex justify-center align-center">
|
|
<view class="nav-icon">
|
|
<slot></slot>
|
|
<u-icon size="40" 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
|
|
},
|
|
zIndex: {
|
|
type: [Number, String],
|
|
default: 999
|
|
}
|
|
},
|
|
methods: {
|
|
handleBack () {
|
|
uni.navigateBack({
|
|
delta: this.backNum
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.comm-navbar {z-index: 999;
|
|
.statusBarHeight {width: 100%;height: var(--status-bar-height);}
|
|
.navbar {height: 80rpx;width: 100%;padding: 0 32rpx;}
|
|
.nav-text {font-size: 36rpx;}
|
|
.nav-icon {position: absolute;left: 10rpx;}
|
|
.bakc {font-size: 36rpx}
|
|
}
|
|
</style>
|