uniapp自定义导航栏（setup语法糖）

原创已于 2024-03-08 11:30:41 修改 · 1.5k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2024-03-08 11:25:52 首次发布

文章介绍了如何在小程序中使用uni-app组件获取设备信息，如状态栏高度、顶部和底部导航栏高度，并在Vue文件中动态调整导航栏样式，例如添加搜索框功能。

小程序可以直接使用，app需要调整一下使用的参数，我一般也就用到状态栏高度

我一般直接封装成一个组件，然后父组件传过来自定义的高度、自定义样式包括搜索等

1、新建一个js文件用来存放获取到的设备信息

export function getdeviceInfo() {
    const globalData = {
        statusBarHeight: 0, // 状态导航栏高度
        topHeight: 0, // 距离顶部高度
        navHeight: 0, // 总体高度
        windowHeight: 0, // 可使用窗口高度
        tabBarHight: 0, //底部导航栏高度
    };
    let systemInfo = uni.getSystemInfoSync()
    globalData.windowHeight = systemInfo.screenHeight
    // 底部导航栏
    globalData.tabBarHight = systemInfo.screenHeight - systemInfo.safeArea.bottom
    // 状态栏高度
    globalData.statusBarHeight = systemInfo.statusBarHeight
/*#ifdef MP*/
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// 胶囊距离顶部高度
    globalData.topHeight = menuButtonInfo.top
// 胶囊高度
    globalData.navHeight = menuButtonInfo.height
/*#endif*/

    return {
        globalData
    }
}

2、在main.js中引入并挂载

import { getdeviceInfo } from '@/common/deviceInfo.js'
app.config.globalProperties.$key = getdeviceInfo(); // 定义全局变量

3、vue文件

<template>
	<!-- 导航栏 -->
	<view class="header-box" :style="{height:navHeight+topHeight+30+'px'}">
		<view class="header-nav" :style="{height:navHeight+'px',marginTop:topHeight+'px'}">
			<view class="nav-back" :style="{marginLeft:rightWidth+'px'}">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<text class="nav-title">
				标题
			</text>
		</view>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance();
	const {
		navHeight,
		topHeight,
		rightWidth
	} = toRefs(proxy.$key.globalData)
	console.log(rightWidth);
</script>

<style lang="scss" scoped>
	.header-box {
		overflow: hidden;
		box-sizing: border-box;
		background: linear-gradient(#f9dacd, #ffffff);

		.header-nav {
			text-align: center;
			display: flex;
			align-items: center;
			position: relative;

			.nav-title {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
</style>

4、封装成组件

子组件

<template>
    <!-- 导航栏 -->
    <view class="header-box" :style="{height:navHeight+topHeight+height+'px'}">
        <view class="header-nav" :style="{height:navHeight+'px',marginTop:topHeight+'px'}">
            <view class="nav-back" :style="{marginLeft:rightWidth+'px'}">
                <u-icon size="18" name="arrow-left"></u-icon>
            </view>
            <text class="nav-title">
                {{title}}
            </text>
        </view>
        <view v-if="isSearch" class="search-box" :style="{paddingLeft:rightWidth+'px',paddingRight:rightWidth+'px'}">
            <u-search placeholder="搜索商品名称" bgColor="#ffffff" :show-action="false" v-model="keyword" @search="confirm"></u-search>
        </view>

    </view>
    <!-- 占位 -->
    <view :style="{height:navHeight+topHeight+height+'px'}">
    </view>
</template>

<script setup>
    import {
        getCurrentInstance,
        ref
    } from 'vue'
    const {
        proxy
    } = getCurrentInstance();
    const {
        navHeight,
        topHeight,
        rightWidth,
        windowHeight
    } = toRefs(proxy.$key.globalData)
    const emit = defineEmits(['toSearch'])
    const keyword = ref('')
    const props = defineProps({
        height: {
            type: Number,
            default: 30
        },
        title: String,
        isSearch: Boolean
    })
    const confirm = () => {
        emit('toSearch', keyword.value)
    }
</script>

<style lang="scss" scoped>
    page {
        position: relative;
    }

    .header-box {
        width: 100%;
        position: fixed;
        top: 0;
        overflow: hidden;
        box-sizing: border-box;
        background: linear-gradient(#f9dacd, #ffffff);

        .header-nav {
            text-align: center;
            display: flex;
            align-items: center;
            position: relative;

            .nav-title {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .search-box {
            margin-top: 20rpx;
        }
    }
</style>

父组件

<!-- 导航栏 -->
    <navBar title="标题" :height="60" :isSearch="true" @toSearch="toSearch" />