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>
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js