uni-app 自定义封装顶部导航栏-持续优化中...

自定义顶部导航栏，
需要配合ThorUI 图标组件 https://thorui.cn/doc/docs/tui-icon.html
一起使用；

components组件结构：

<template>
    <view>
        <view class="tan-nav-box" :style="'background:'+backgroundColor">
            <view class="tan-title">
                <view class="tan-side tan-left"> 
                    <block v-if="isLeftMenu == true">
                        <tui-icon name="arrowleft" @click="MenuClick(1)" :size="backSize" :color="iconColor"></tui-icon>
                    </block>
                </view>
                <view class="title" :style="'color:'+titleColor">{{title}}</view>
                <view class="tan-side tan-right">
                    <block v-if="isRightMenu == true">
                        <tui-icon name="manage" @click="MenuClick(2)" :size="rightMenuSize" :color="iconColor"></tui-icon>
                        </view>
                    </block>
            </view>
        </view>
        <!-- #ifdef APP-PLUS -->
        <view class="" style="width: 100%;height: 70rpx"></view>
        <!-- #endif -->
        <view class="" style="width: 100%;height: 91rpx"></view>
    </view>
</template>

组件脚本：

<script>
    export default {
        name:'TopNavBar',
        data() {
            return {
                
            };
        },
        props:{
            // 返回按钮大小
            backSize:{
                type:Number,
                default:30
            },
            backgroundColor:{ // 导航栏背景颜色
                type:String,
                default:'#FFFFFF'
            },
            rightMenuSize:{ //右侧菜单大小
                type:Number,
                default:30
            },
            iconColor:{ // 图标颜色
                type:String,
                default:'#333'
            },
            titleColor:{
                type:String,
                default:'#000'
            },
            isLeftMenu:{ // 是否显示左侧按钮
                type:Boolean,
                default:false
            },
            isRightMenu:{ // 是否显示右侧安妮
                type:Boolean,
                default:false
            },
            //  标题
            title:{
                type:String,
                default:'耦愉'
            }
        },
        methods:{
            MenuClick(e){
                this.$emit('click', {
                    index:e 
                });
            }
        }
    }
</script>

组件样式

<style lang="less">
    .tan-nav-box{
        position: fixed;
        z-index: 999;
        //  #ifdef APP-PLUS
        padding-top: 70rpx;
        // #endif
        width: 100%;
        box-sizing: border-box;
    }
    
    .tan-title{
        width: 100%;
        height: 90rpx;
        padding: 10rpx 30rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .tan-side{
        width: 150rpx;
        height: 90rpx;
        display: flex;
        align-items: center;
        
    }
    
    .tan-left{
        justify-content: flex-start;
    }
    
    .tan-right{
        justify-content: flex-end;
    }
</style>

在需要使用的页面中使用 ：

<template>
    <view>
        <top-nav-bar :isLeftMenu="true" @click="handleClick" :isRightMenu="true" title="标题" titleColor="#fff"  :backSize="30" :rightMenuSize="28" iconColor="#333" backgroundColor="#ff6700"></top-nav-bar>
    </view>
</template>

来看看运行效果：