自定義頂部導(dǎo)航欄，
需要配合ThorUI 圖標(biāo)組件 https://thorui.cn/doc/docs/tui-icon.html
一起使用鳄哭；

components組件結(jié)構(gòu)：

<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:{ // 導(dǎo)航欄背景顏色
                type:String,
                default:'#FFFFFF'
            },
            rightMenuSize:{ //右側(cè)菜單大小
                type:Number,
                default:30
            },
            iconColor:{ // 圖標(biāo)顏色
                type:String,
                default:'#333'
            },
            titleColor:{
                type:String,
                default:'#000'
            },
            isLeftMenu:{ // 是否顯示左側(cè)按鈕
                type:Boolean,
                default:false
            },
            isRightMenu:{ // 是否顯示右側(cè)安妮
                type:Boolean,
                default:false
            },
            //  標(biāo)題
            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>

在需要使用的頁(yè)面中使用 ：

<template>
    <view>
        <top-nav-bar :isLeftMenu="true" @click="handleClick" :isRightMenu="true" title="標(biāo)題" titleColor="#fff"  :backSize="30" :rightMenuSize="28" iconColor="#333" backgroundColor="#ff6700"></top-nav-bar>
    </view>
</template>

來看看運(yùn)行效果：

image.png