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>
相关推荐
中微子32 分钟前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z41 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录1 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子1 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神1 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao1 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风1 小时前
JS执行机制-event loop
javascript
止观止1 小时前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
摆烂为不摆烂1 小时前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神1 小时前
cocos游戏开发中,如何制作一个空气墙
前端·javascript