demo 地址: https://github.com/iotjin/jh-uniapp-demo

uni-app项目中，有时通过pages.json设置navbar达不到想要的效果，此时需要使用自定义的navbar组件来实现，本项目中的navbar是基于uView的Navbar 进行二次封装

效果图

用法

pages.json的navigationStyle要设置为custom，然后在需要的页面加nav组件代码

注：实际一个页面只有一个navbar，isFixed是为了demo展示才放出来的属性，一般不加

{
    "path": "pages/module3/index",
    "style": {
        "navigationStyle": "custom", // 使用自定义导航栏
        "navigationBarTitleText": "我的",
        "enablePullDownRefresh": false
    }
}

    <view class="text"> 默认样式，左侧返回和标题 </view>
        <base-navbar :isFixed="false" title="标题" />

        <!-- 自定义右侧solt，rightImg、rightText 失效 -->
        <view class="text"> 自定义右侧solt，rightImg、rightText 失效 </view>
        <base-navbar :isFixed="false" :title="title" :isBack="false" :rightImg="rightImg" :rightText="rightText">
            <u-icon name="chat" size="38" slot="right" @click="clickRightItem"></u-icon>
        </base-navbar>

        <!-- 右侧图片 -->
        <view class="text"> 右侧图片 </view>
        <base-navbar :isFixed="false" :title="title" :isBack="false" :rightImg="rightImg" @clickRightItem="clickRightItem" />

        <!-- 右侧文字 -->
        <view class="text"> 右侧文字 </view>
        <base-navbar :isFixed="false" :title="title" :isBack="false" :rightText="rightText" @clickRightItem="clickRightItem" />

        <!-- 自定义左侧solt，leftImg、leftText 失效  -->
        <view class="text"> 自定义左侧solt，leftImg、leftText 失效 </view>
        <base-navbar :isFixed="false" :title="title" :isBack="false">
            <u-icon name="chat" size="38" slot="left" @click="clickLeftItem"></u-icon>
        </base-navbar>

        <!-- 左侧图片 -->
        <view class="text"> 左侧图片 </view>
        <base-navbar :isFixed="false" :title="title" :isBack="false" :leftImg="leftImg" @clickLeftItem="clickLeftItem" />

        <!-- 左侧文字 -->
        <view class="text"> 左侧文字 </view>
        <base-navbar :isFixed="false" title="标题" :isBack="false" :leftText="leftText" @clickLeftItem="clickLeftItem" />

全部代码

<template>
    <view>
        <u-navbar :is-back="isBack" :back-icon-color="backColor" :title="title" :title-color="titleColor" :background="background" :is-fixed="isFixed">

            <template v-if="$slots.left">
                <slot name="left"></slot>
            </template>
            <template v-else-if="leftImg">
                <image class="nav-item-img" :src="leftImg" @click="onClickNavLeftItem"></image>
            </template>
            <template v-else-if="leftText">
                <view class="nav-item-text" @click="onClickNavLeftItem">{{leftText}}</view>
            </template>

            <template v-if="$slots.right" slot="right">
                <slot name="right"></slot>
            </template>
            <template v-else-if="rightImg" slot="right">
                <image class="nav-item-img" :src="rightImg" @click="onClickNavRightItem"></image>
            </template>
            <template v-else-if="rightText" slot="right">
                <view class="nav-item-text" @click="onClickNavRightItem">{{rightText}}</view>
            </template>

        </u-navbar>
    </view>
</template>

<script>
    export default {
        name: "base-navbar",
        props: {
            // 是否显示返回按钮，默认为true
            isBack: { type: Boolean, default: true },
            title: { type: String, default: '' },
            // 右侧图片地址，优先级高于rightText，低于右侧slot 
            rightImg: { type: String, default: '' },
            rightText: { type: String, default: '' },
            // 左侧图片地址，优先级高于leftText，低于左侧slot
            leftImg: { type: String, default: '' },
            leftText: { type: String, default: '' },
            isFixed: { type: Boolean, default: true },
        },
        data() {
            return {
                backColor: "white",
                titleColor: "white",
                background: {
                    // backgroundColor: '#38BC9D',
                    // // 导航栏背景图
                    // background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
                    // // 还可以设置背景图size属性
                    // backgroundSize: 'cover',
                    // 渐变色
                    backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
                }
            };
        },
        methods: {
            onClickNavLeftItem() {
                this.$emit("clickLeftItem", {});
            },
            onClickNavRightItem() {
                this.$emit("clickRightItem", {});
            }
        }
    }
</script>

<style>
    .nav-item-text {
        color: white;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-item-img {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
    }
</style>