uniapp自定义导航 vue3实现

我用到的自定义导航是单页面使用，所以多页面使用建议自行查阅。首先代码，里面一定要引入uview哟，配套使用Uview的样式组件，引入方式自行查阅官方文档。

Form 表单 | uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！ (fsq.pub)

实现效果如下：（ps:由于本人CSS样式没学好，借助了uview布局实现）

 

步骤如下：

1、更改page.json该页面的style，主要是navigationStyle设为custom

{            "path": "pages/xxx/xxx/index",            "style": {                "navigationBarTitleText": "设备",                "enablePullDownRefresh": false,                "navigationStyle":"custom"            }

2、回到当前页面布置布局

<template>    <view>        <!-- 自定义导航栏 -->        <view class="navBarBox">            <!-- 状态栏占位 -->            <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>            <!-- 真正的导航栏内容 -->            <view class="navBar">                <u-row gutter="16">                    <u-col :span="4">                        <u-image @click="handleBack" src="@/static/images/table/back.svg" width="50rpx" height="50rpx">                        </u-image>                    </u-col>                    <u-col :span="5">设备</u-col>                    <u-col :span="2">                        <!-- 新增设备 -->                        <u-image src="@/static/images/table/add.svg" width="60rpx" height="60rpx"></u-image>                    </u-col>                    <u-col :span="1">                        <!-- 批量导入设备 -->                        <u-image src="@/static/images/table/insert.svg" width="60rpx" height="60rpx"></u-image>                    </u-col>                </u-row>            </view>        </view>        <!-- 页面内容 -->        <view class="content-body">            我是页面内容        </view>    </view></template><script setup>    import {        ref,        reactive,        getCurrentInstance,        toRefs    } from "vue"    import {        onLoad,        onShow,        onReady    } from "@dcloudio/uni-app";    const {        proxy    } = getCurrentInstance();    const count = ref(4)    const selectAll = ref(false)    const data = reactive({        // 状态栏高度        statusBarHeight: 0,        // 导航栏高度        navBarHeight: 82 + 11,        showList: [],            })    const {        statusBarHeight,        navBarHeight,    } = toRefs(data)    onLoad((option) => {        // console.log(option,"option....");        //获取手机状态栏高度        statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];    });    function handleBack() {        uni.navigateBack()    }    </script><style>    .navBarBox {}    .navBarBox .statusBar {}    .navBarBox .navBar {        font-size: 1.5em;        padding: 20rpx 10rpx;        height: 100rpx;    }    .content-body {        padding: 20rpx 10rpx;    }   </style>

3、右上角的图标是在图标库上查找的免费图标，按照上述位置添加即可。

图标代码如下：

add.svg

<svg enable-background="new 0 0 50 50" height="50px" id="Layer_1" version="1.1" viewBox="0 0 50 50" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect fill="none" height="50" width="50"/><line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="4" x1="9" x2="41" y1="25" y2="25"/><line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="4" x1="25" x2="25" y1="9" y2="41"/></svg>

insert.svg

<svg fill="none" height="24" stroke-width="1.5" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 13V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 15V3M12 3L8.5 6.5M12 3L15.5 6.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>

back.svg

<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M4.29642 12L12.7875 3.27302C13.0764 2.97614 13.0699 2.50131 12.773 2.21246C12.4761 1.9236 12.0013 1.93011 11.7125 2.22698L2.71246 11.477C2.42918 11.7681 2.42918 12.2319 2.71246 12.523L11.7125 21.773C12.0013 22.0699 12.4761 22.0764 12.773 21.7875C13.0699 21.4987 13.0764 21.0239 12.7875 20.727L4.29642 12Z" fill="#212121"/></svg>

4、完活。自行配置图标的样式和方法，@click方法配置想要的功能即可。