94 lines
1.9 KiB
Vue
94 lines
1.9 KiB
Vue
<template>
|
||
<view>
|
||
<view class="nav-top" :style="{ height: CustomBar+'px',
|
||
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }">
|
||
<view class="nav-content" :style="{ paddingTop: StatusBar+'px' }">
|
||
<u-icon v-if="showBack" name="arrow-left" size="36" @click="back"
|
||
:color="topLevel===0? defaultBackColor : `rgba(51, 51, 51,${topLevel})`"></u-icon>
|
||
<view style="width: 35rpx;height: 35rpx;" v-else />
|
||
<text :style="{ color: topLevel===0? defaultNavTextColor : `rgba(51, 51, 51,${topLevel})` }">{{ title }}</text>
|
||
<view style="width: 35rpx;height: 35rpx;" />
|
||
</view>
|
||
</view>
|
||
<view v-if="!fixed" :style="{height: CustomBar+'px'}" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
// #ifdef MP
|
||
options: {
|
||
styleIsolation: 'shared'
|
||
},
|
||
// #endif
|
||
props:{
|
||
topLevel:{
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
title:{
|
||
type: String,
|
||
default: '标题'
|
||
},
|
||
showBack:{
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 初始返回按钮颜色
|
||
defaultBackColor:{
|
||
type: String,
|
||
default: '#ffffff00'
|
||
},
|
||
// 初始标题颜色
|
||
defaultNavTextColor:{
|
||
type: String,
|
||
default: '#ffffff00'
|
||
},
|
||
// 是否fixed，决定是否有留空
|
||
fixed:{
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
// #ifdef MP
|
||
// 微信小程序自定义导航栏参数
|
||
StatusBar: this.StatusBar || 0,
|
||
CustomBar: this.CustomBar || 0
|
||
// #endif
|
||
}
|
||
},
|
||
methods:{
|
||
// 返回
|
||
back(){
|
||
uni.navigateBack();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.nav-top{
|
||
position: fixed;
|
||
width: 100%;
|
||
top: 0;
|
||
background-color: aliceblue;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 100;
|
||
.nav-content{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
width: 100%;
|
||
text{
|
||
font-family: Source Han Sans SC;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
</style> |