uniapp自定义navBar

1.html

<view :style="{paddingTop: systemBarHeight + 25 + 'px'}" :class="['head-bag',{isSticky:isSticky}]">
        <view class="arrow-back" @tap="goBack">
            <image :src="leftNavImage" mode="aspectFit"></image>
        </view>
        <view v-if="title && !customMiddle" class="head-title">
            {{title}}
        </view>
        <view class="head-title" v-else-if="customMiddle">
            <slot name="middle"></slot>
        </view>
        <slot name="right"></slot>
    </view>

2.css

.isSticky{
    position: sticky;
    top: 0;
    z-index: 1;
}
.head-bag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 0 30rpx 28rpx 30rpx;
    .arrow-back {
        width: 42rpx;
        height: 34rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .head-title {
        flex: 1;
        text-align: center;
        color: #181818;
        font-size: 48rpx;
        font-family: San Francisco Display;
        font-weight: bold;
    }
}

3.js

export default {
    props: {
        leftNavImage:{
            type: String,
            default: require('@/static/images/back.png')
        },
        title:{
            type: String,
        },
        customJump:{
            type: Function | Boolean,
            default:false
        },
        customMiddle:{
            type: Boolean,
            default:false
        },
        isSticky:{
            type: Boolean,
            default:false
        }
    },
    data() {
        return {
            systemBarHeight: 0,
        };
    },
    created() {
        this.getSysteminfo()
    },
    methods: {
        // 获取系统栏高度
        getSysteminfo() {
            uni.getSystemInfo({
                success: res => {
                    this.systemBarHeight = res.statusBarHeight;
                }
            });
        },
        goBack() {
            if(this.customJump){
                this.customJump()
                return
            }
            let pageList = getCurrentPages();
            pageList.length > 1 ? this.$Router.back() : this.$Router.pushTab('/pages/index/index');
        },
    }
}

4.使用

	<myNavBar :title="isEdit?$t('mine.editAddress'):$t('mine.addAddress')" class="head-right-image">
			<view slot="right" v-if="isEdit">
				<image src="@/static/images/my-page/delete2.png" @tap.stop="deleteAddress"></image>
			</view>
		</myNavBar>