uniapp-自定义navigationBar

  1. 封装导航栏自定义组件
    创建 nav-bar.vue
html 复制代码
<script setup>
	import {
		onReady
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	const props=defineProps(['navBackgroundColor'])
	const statusBarHeight = ref()
	const navHeight = ref()
	onReady(() => {
		uni.getSystemInfo({
			success: (e) => {
				statusBarHeight.value = e.statusBarHeight
				const custom = uni.getMenuButtonBoundingClientRect()
				navHeight.value = custom.height + (custom.top - e.statusBarHeight) * 2
			}
		})
	})
</script>
<template>
	<view :style="{'background-color': props.navBackgroundColor}">
		<view :style="{'height':statusBarHeight+'px'}"></view>
		<view class="nav" :style="{'height':navHeight+'px'}">
			<view class="left">
				<slot name="left"></slot>
			</view>
			<view class="center">
				<slot name="center"></slot>
			</view>
			<view class="right"></view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.nav {
		font-size: 30rpx;
		height: 100%;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			width: 100rpx;
		}

		.right {
			width: 100rpx;
		}
	}
</style>
  1. 测试使用自定义导航
html 复制代码
<script setup>
const back=()=>{
	console.log('back')
}
</script>

<template>
		<nav-bar navBackgroundColor="#efefef">
			<template #left>
				<text @click="back">返回</text>
			</template>
			<template #center style="color: red;">
				中间
			</template>	
		</nav-bar>
</template>

<style lang="scss" scoped>
	
</style>
相关推荐
Mike_jia几秒前
Icinga 2:开源监控领域的全能选手——从零构建企业级智能运维体系
前端
wuxuanok2 分钟前
Web前端开发-HTML、CSS
前端·css·html
Mike_jia2 分钟前
Dish:套接字监控领域的「听诊器」——轻量级网络健康守护神深度解析
前端
独立开阀者_FwtCoder11 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士11 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明11 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金9201416 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius17 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku19 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿19 分钟前
Js事件循环
javascript