uniapp：自定义导航栏适配多端

导航栏制作适配多端

效果图

1. 配置pages.json

设置 navigationStyle:"custom"

一、导航栏组件创建

1. 定义导航栏组件

2. 使用导航栏组件

同名组件支持easycomment，不需要使用import方式进行导入即可使用

3. 结构搭建

   1. 图标使用

      uni-icons图标插件安装：ext.dcloud.net.cn/plugin?id=2…

4. 处理小程序显示错位问题

   微信及APP应用实现状态栏高度占位处理

   方法参考地址：uniapp.dcloud.io/api/system/…

   

   微信小程序胶囊信息获取

   文档参考地址:uniapp.dcloud.io/api/ui/menu…

   

NavBar源码

<template>
    <view>
        <view class="bg-red-500 px-30 fixed top-0 left-0 right-0" :style="{paddingBottom:navbarPaddingBottom + 'rpx'}">
            <!-- 状态栏垫片 -->
            <view :style="{height:statusBarHeight + 'rpx'}"></view>
            <view @click="goSearchPage" class="bg-white rounded-full flex items-center px-30"
                :style="{height:inputHeight + 'rpx',marginRight:inputMarginRight + 'rpx'}">
                <uni-icons type="search" size="20" class=" flex-none mr-20"></uni-icons>
                <view class="flex-1 text-slate-500">请输入标题进行搜索</view>
            </view>
        </view>
        <!-- 导航栏垫片 -->
        <view :style="{height:navbarHeight + 'rpx'}"></view>
    </view>
</template>

<script setup>
	import {ref,computed} from "vue";
	// 状态栏高度 rpx
	const statusBarHeight=ref(0)
	// 输入框高度 rpx
	const inputHeight=ref(80)
	// 输入框距离右侧的 margin rpx
	const inputMarginRight = ref(0)
	// 导航栏底部 padding rpx
	const navbarPaddingBottom = ref(20)
	// 导航栏的高度
	const navbarHeight = computed(()=>statusBarHeight.value + inputHeight.value + navbarPaddingBottom.value)
	// 设置状态栏垫片高度
	const getSystemInfoSync = ()=>{
		// 获取系统信息
		const res = uni.getSystemInfoSync()
		// 设置状态栏高度
		statusBarHeight.value = res.statusBarHeight * 2 + navbarPaddingBottom.value;
	
		// #ifdef MP-WEIXIN
		
			// 获取微信胶囊信息
			const MenuButtonRect = uni.getMenuButtonBoundingClientRect()
			// 设置状态栏高度为胶囊的top值
			statusBarHeight.value = MenuButtonRect.top * 2
			// 设置输入框的高度为胶囊的高度
			inputHeight.value = MenuButtonRect.height * 2;
			// 设置输入框距离右侧的 margin为胶囊的的宽度
			inputMarginRight.value = MenuButtonRect.width * 2;
			
		// #endif
	}
	getSystemInfoSync();
	// 导航到搜索页
	const goSearchPage = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
</script>