76 lines
1.5 KiB
Vue
76 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<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? '#ffffff00' : `rgba(51, 51, 51,${topLevel})`"></u-icon>
|
||
|
|
<view style="width: 35rpx;height: 35rpx;" v-else />
|
||
|
|
<text :style="{ color: topLevel===0? '#ffffff00' : `rgba(51, 51, 51,${topLevel})` }">{{ title }}</text>
|
||
|
|
<view style="width: 35rpx;height: 35rpx;" />
|
||
|
|
</view>
|
||
|
|
</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
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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>
|