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>
相关推荐
大猫会长5 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_5 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe10107 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang7 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi8 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课11 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥11 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe101012 分钟前
6-1. 实现 useState
前端
呆呆没有脑袋14 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe101015 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端