nuiapp 自定义navbar

最新推荐文章于 2024-09-27 15:27:45 发布

qewra

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量101

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qewra/article/details/142372401

版权

代码示例

navbar 组件

// navbar 组件

<template>
	<view class="layout">
        <!-- 状态栏 -->
		<view class="status-bar"></view>

		<view class="navbar">
			<text class="navbar-title">{{props.title}}</text>
			<navigator url="/pages/search/index" class="search-section">
				<uni-icons class="icon" type="search" color="#888" size="18"></uni-icons>
				<text class="text">搜索</text>
			</navigator>
		</view>
	</view>
	<!-- 填充块 -->
	<view class="fill"></view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getStatusBarHeight,
		getNavBarHeight,
		getFillHeight
	} from "@/utils/system.js"

	const props = defineProps({
		title: {
			type: String,
			default: '推荐'
		}
	})

	// 状态栏的高度
	const statusBarHeight = ref(getStatusBarHeight() * 2 + 'rpx')
	// 导航栏高度
	const navbarHeight = ref(getNavBarHeight() * 2 + 'rpx')
	// 填充高度
	const fillHeight = ref(getFillHeight() * 2 + 'rpx')
</script>

<style scoped lang="scss">
	.layout {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #beecd8 20%, #F4E2D8);

		.status-bar {
			width: 100%;
			height: v-bind(statusBarHeight);
		}

		.navbar {
			display: flex;
			align-items: center;
			height: v-bind(navbarHeight);
			margin-left: 30rpx;

			&-title {
				font-weight: 600;
				font-size: 36rpx;
				color: #000;
			}

			.search-section {
				width: 220rpx;
				height: 50rpx;
				border-radius: 60rpx;
				background: rgba(255, 255, 255, 0.4);
				border: 1px solid #fff;
				margin-left: 30rpx;
				color: #999;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.icon {
					margin-left: 5rpx;
				}

				.text {
					padding-left: 10rpx;
				}
			}
		}
	}

	.fill {
		width: 100%;
		height: v-bind(fillHeight);
	}
</style>

system.js

// system.js

const SYSTEM_INFO = uni.getSystemInfoSync();

// 手机状态栏高度
export const getStatusBarHeight = () => SYSTEM_INFO.statusBarHeight || 20;

// 导航栏高度
export const getNavBarHeight = () => {
	if (uni.getMenuButtonBoundingClientRect) {
		let {
			top,
			height
		} = uni.getMenuButtonBoundingClientRect();
		return height + (top - SYSTEM_INFO.statusBarHeight) * 2 // 按rpx计算 故 *2
	} else {
		return 48;
	}
}

// 填充块高度
export const getFillHeight = () => getStatusBarHeight() + getNavBarHeight();

效果图