通用自定义导航栏封装，2/4页面使用
This commit is contained in:
WindowBird
parent
3e2bdb482e
commit
85befc2a71
|
|
@ -1,16 +1,26 @@
|
|||
<template>
|
||||
<view class="layout">
|
||||
<view class="navbar">
|
||||
<view :style="{ background: backgroundColor }" class="navbar">
|
||||
<view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
|
||||
<view
|
||||
:style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }"
|
||||
class="titleBar"
|
||||
>
|
||||
<view class="title">{{ title }}</view>
|
||||
<!-- <navigator class="search" url="/pages/search/search">-->
|
||||
<!-- <uni-icons class="icon" color="#888" size="18" type="search"></uni-icons>-->
|
||||
<!-- <text class="text">></text>-->
|
||||
<!-- </navigator>-->
|
||||
<!-- 返回按钮 -->
|
||||
<view v-if="showBack" class="back-button" @click="goBack">
|
||||
<image :src="commonEnum.BACK" class="left-icon"></image>
|
||||
</view>
|
||||
|
||||
<!-- 标题 -->
|
||||
<view :style="{ color: titleColor, textAlign: titleAlign }" class="title"
|
||||
>{{ title }}
|
||||
</view>
|
||||
|
||||
<!-- 右侧搜索按钮 -->
|
||||
<view v-if="showSearch" class="search" @click="handleSearch">
|
||||
<uni-icons :color="iconColor" class="icon" size="18" type="search"></uni-icons>
|
||||
<text :style="{ color: iconColor }" class="text">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -26,13 +36,79 @@ import {
|
|||
getNavBarHeight,
|
||||
getLeftIconLeft,
|
||||
} from '@/utils/system.js'
|
||||
import commonEnum from '../../enum/commonEnum'
|
||||
import { navigateBack } from '../../utils/router'
|
||||
import UniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
|
||||
|
||||
defineProps({
|
||||
// 定义组件属性
|
||||
const props = defineProps({
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: '壁纸',
|
||||
default: '标题',
|
||||
},
|
||||
// 背景颜色
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#ffddca',
|
||||
},
|
||||
// 标题颜色
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: '#3d3d3d',
|
||||
},
|
||||
// 图标颜色
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#888',
|
||||
},
|
||||
// 是否显示返回按钮
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否显示搜索按钮
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 标题对齐方式
|
||||
titleAlign: {
|
||||
type: String,
|
||||
default: 'center', // 'left', 'center', 'right'
|
||||
},
|
||||
// 返回按钮点击事件
|
||||
onBack: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
// 搜索按钮点击事件
|
||||
onSearch: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['back', 'search'])
|
||||
|
||||
// 返回按钮点击处理
|
||||
function goBack() {
|
||||
if (props.onBack) {
|
||||
props.onBack()
|
||||
} else {
|
||||
navigateBack(1)
|
||||
}
|
||||
emit('back')
|
||||
}
|
||||
|
||||
// 搜索按钮点击处理
|
||||
function handleSearch() {
|
||||
if (props.onSearch) {
|
||||
props.onSearch()
|
||||
}
|
||||
emit('search')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -43,43 +119,79 @@ defineProps({
|
|||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
background: #ffddca;
|
||||
|
||||
.statusBar {
|
||||
// 状态栏高度
|
||||
}
|
||||
|
||||
.titleBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #3d3d3d;
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
// 根据对齐方式调整样式
|
||||
&.title-left {
|
||||
text-align: left;
|
||||
margin-left: 80rpx; // 为返回按钮留出空间
|
||||
}
|
||||
|
||||
&.title-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.title-right {
|
||||
text-align: right;
|
||||
margin-right: 80rpx; // 为搜索按钮留出空间
|
||||
}
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 80rpx;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
|
||||
.left-icon {
|
||||
width: 18rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 220rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 80rpx;
|
||||
height: 50rpx;
|
||||
margin-left: 10rpx;
|
||||
color: #3d3d3d;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
|
||||
.icon {
|
||||
margin-left: 5rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding-left: 10rpx;
|
||||
padding-left: 5rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fill {
|
||||
// 占位高度
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<view class="home-container">
|
||||
<!-- 头部信息 -->
|
||||
|
||||
<custom-nav-bar title="福鼎创特物联科技有限公司"></custom-nav-bar>
|
||||
<custom-nav-bar title="福鼎创特物联科技有限公司" title-align="left"></custom-nav-bar>
|
||||
|
||||
<!-- 公告栏 -->
|
||||
<announcement-bar
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<view class="lease-page">
|
||||
<!-- 头部区域 -->
|
||||
<custom-nav-bar2 color="#FFDECB" title="租赁申请"></custom-nav-bar2>
|
||||
|
||||
<custom-nav-bar background-color="#FFDECB" title="租赁申请" title-align="center" />
|
||||
<view class="header">
|
||||
<image
|
||||
:src="commonEnum.FIRE_BACKGROUND_FULL"
|
||||
|
|
@ -420,7 +421,7 @@ export default {
|
|||
.lease-page {
|
||||
position: relative;
|
||||
background: #f3f5f6;
|
||||
border: #120d0d solid 2rpx;
|
||||
//border: #120d0d solid 2rpx;
|
||||
}
|
||||
|
||||
// 头部区域
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user