Uni app custom navigation bar component

design sketch ：
 

It is generally necessary to hide the native navigation bar , Can be in pages.json In file , Add a code to the corresponding page setup ：

"navigationStyle":"custom"

NavBar The navigation bar

Navigation bar components , Mainly used for head navigation , Component name ：uni-custom-navBar, Code block ： navigationBar.

stay  script  Reference component in ：

<script>
    import navigationBar from "../../components/uni-custom-navbar.vue"
    export default {
        components: {
            navigationBar
        }

} </script>

  stay  template  Components used in ：

<template>

<navigationBar title=" Title Text " leftText=" return " rightText=" Share " backgroundColor="#007AFF"
        rightColor="#ff00ff" barHeight="90"></navigationBar>

</template>

  Attribute specification ：

Property name	type	The default value is	explain
title	String	-	Title Text
titleColor	String	#000000	Color of title text
leftText	String	-	Left button text
leftColor	String	#000000	Left button text color
rightText	String	-	Right button text
rightColor	String	#000000	Right button text color
leftIcon	String	-	Left button icon - route
rightIcon	String	-	Right button icon - route
backgroundColor	String	#FFFFFF	Set the navigation bar background color by default
barHeight	Number	90	Default navigation bar height
fixed	Boolean	false	Whether the top is fixed （ If fixed , Make the following layout settings margin-top: barHeight）
@clickLeft	-	-	Triggered when the left button is clicked
@clickRight	-	-	Triggered when the button on the right is clicked

  This completes the custom navigation bar component .

1. Code ：CustomComponents8

<template>
    <view class="content">
        <!-- toolBar -->
        <navigationBar title=" Title Text " leftText=" return " rightText=" Share " backgroundColor="#007AFF" rightColor="#ff00ff"
            barHeight="90" @clickLeft="btnBack" @clickRight="brnFontShare"></navigationBar>
        <!-- Data test list -->
        <view class="list" v-for="(item ,index) in list">
            <text class="txt"> Payment means development plan database { {index}}</text>
        </view>
    </view>
</template>

<script>
    import navigationBar from "../../components/uni-custom-navbar.vue"
    export default {
        components: {
            navigationBar
        },
        data() {
            return {
                list: ["", "", "", "", "", ""],
            }
        },
        methods: {
            // return
            btnBack: function() {
                uni.showToast({
                    title: " The navigation bar   The left button is clicked ...",
                    icon: "none",
                    duration: 2000
                })
            },
            // Share
            brnFontShare:function(){
                uni.showToast({
                    title: " The navigation bar   The right button is clicked ...",
                    icon: "none",
                    duration: 2000
                })
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
    }

    .list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #4CD964;
        width: 96%;
        height: 300rpx;
        margin-top: 20rpx;
    }

    .txt {
        color: white;
        font-size: 30rpx;
    }

    page {
        background-color: #FFFFFF;
    }
</style>
2. Custom navigation bar components  uni-custom-navbar.vue

<template name="uni-custom-navbar">
    <!-- toolBar -->
    <view :class="fixed?'uni-navbar-fixed':'uni-navbar'"
        :style="'width: 100%; height:'+barHeight+'rpx; background-color:'+backgroundColor">
        <!--   The navigation bar left -->
        <view class="bar-left">
            <image class="left_icon" @click="onClickLeft" v-if="leftIcon.length > 0" :src="leftIcon" mode="scaleToFill">
            </image>
            <text class="txt-left" @click="onClickLeft" v-else :style="'color: '+leftColor+';'">{ {leftText}}</text>
        </view>
        <!--   The navigation bar Middle title -->
        <text class="bar-center" :style="'color: '+titleColor+';'">{ {title}}</text>
        <!--   The navigation bar On the right side -->
        <view class="bar-right">
            <image class="right_icon" @click="onClickRight" v-if="rightIcon.length > 0" :src="rightIcon"
                mode="scaleToFill"></image>
            <text class="txt-right" @click="onClickRight" v-else :style="'color: '+rightColor+';'">{ {rightText}}</text>
        </view>
    </view>

</template>

<script>
    export default {
        name: "uni-custom-navbar",
        data() {
            return {
                // fixed: false, // Whether the top is fixed
                // backgroundColor: "#FFFFFF", // Default setting status bar background color
                // barHeight: "90", // The default setting is the height of the status bar ,
                // title: " Title Text ", // title
                // titleColor: "#000000", // Color of title text
                // leftText: " return ", // Left button text
                // leftColor: "#000000", // Left button text color
                // rightText: " my ", // Right button text
                // rightColor: "#000000", // Right button text color
                // leftIcon: "../../static/nav_back.png", // Left button icon
                // rightIcon: "../../static/nav_mine.png", // Right button icon
            };
        },
        props: {
            title: {
                type: String,
                default: ""
            },
            leftText: {
                type: String,
                default: ""
            },
            rightText: {
                type: String,
                default: ""
            },
            leftIcon: {
                type: String,
                default: ""
            },
            rightIcon: {
                type: String,
                default: ""
            },
            fixed: {
                type: [Boolean, String],
                default: false
            },
            titleColor: {
                type: String,
                default: "#000000"
            },
            rightColor: {
                type: String,
                default: "#000000"
            },
            leftColor: {
                type: String,
                default: "#000000"
            },
            backgroundColor: {
                type: String,
                default: "#FFFFFF"
            },
            barHeight: {
                type: String,
                default: "90"
            }
        },
        methods: {
            onClickLeft() {
                this.$emit("clickLeft");
            },
            onClickRight() {
                this.$emit("clickRight");
            },
        }
    }
</script>

<style>
    .right_icon {
        width: 44rpx;
        height: 44rpx;
        margin-right: 20rpx;
    }

    .left_icon {
        width: 44rpx;
        height: 44rpx;
        margin-left: 20rpx;
    }

    .bar-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        font-size: 36rpx;
    }

    .txt-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 10rpx;
        padding: 20rpx;
        font-size: 32rpx;
        min-width: 65rpx;
    }

    .txt-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 10rpx;
        padding: 20rpx;
        font-size: 32rpx;
        min-width: 65rpx;
    }

    .bar-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100%;
    }

    .bar-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100%;
    }

    .uni-navbar-fixed {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        position: fixed;
        top: 0;
    }

    .uni-navbar {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }
</style>

Demo download