uni-app 自定义导航栏组件

效果图：
 

使用一般需要隐藏原生导航栏，即可在pages.json文件中，对应的页面设置中添加一下代码即可：

“navigationStyle”:”custom”

NavBar 导航栏

导航栏组件，主要用于头部导航，组件名：uni-custom-navBar，代码块： navigationBar。

在 script 中引用组件：

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

} </script>

 在 template 中使用组件：

<template>

<navigationBar title=”标题文字” leftText=”返回” rightText=”分享” backgroundColor=”#007AFF”
        rightColor=”#ff00ff” barHeight=”90″></navigationBar>

</template>

 属性说明：

 这样完成了自定义导航栏组件。

1.代码：CustomComponents8

<template>
    <view class=”content”>
        <!– toolBar –>
        <navigationBar title=”标题文字” leftText=”返回” rightText=”分享” backgroundColor=”#007AFF” rightColor=”#ff00ff”
            barHeight=”90″ @clickLeft=”btnBack” @clickRight=”brnFontShare”></navigationBar>
        <!– 数据测试列表 –>
        <view class=”list” v-for=”(item ,index) in list”>
            <text class=”txt”>支付手段开发计划数据库 {{index}}</text>
        </view>
    </view>
</template>

<script>
    import navigationBar from “../../components/uni-custom-navbar.vue”
    export default {
        components: {
            navigationBar
        },
        data() {
            return {
                list: [“”, “”, “”, “”, “”, “”],
            }
        },
        methods: {
            // 返回
            btnBack: function() {
                uni.showToast({
                    title: “导航栏  左侧按钮被点击…”,
                    icon: “none”,
                    duration: 2000
                })
            },
            // 分享
            brnFontShare:function(){
                uni.showToast({
                    title: “导航栏  右侧按钮被点击…”,
                    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.自定义导航栏组件 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”>
        <!–  导航栏 左侧 –>
        <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>
        <!–  导航栏 中间标题 –>
        <text class=”bar-center” :style=”‘color: ‘+titleColor+’;'”>{{title}}</text>
        <!–  导航栏 右侧 –>
        <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, //是否固定顶部
                // backgroundColor: “#FFFFFF”, //默认设置状态栏背景颜色
                // barHeight: “90”, //默认设置状态栏高度,
                // title: “标题文字”, //标题
                // titleColor: “#000000”, //标题文字的颜色
                // leftText: “返回”, //左侧按钮文本
                // leftColor: “#000000”, //左侧按钮文本颜色
                // rightText: “我的”, //右侧按钮文本
                // rightColor: “#000000”, //右侧按钮文本颜色
                // leftIcon: “../../static/nav_back.png”, //左侧按钮图标
                // rightIcon: “../../static/nav_mine.png”, //右侧按钮图标
            };
        },
        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下载