uniapp开发时，需要实现一些特殊的导航效果，自己手写又会有很多bug,这是可以结合一些现成的ui组件来实现我们想要的效果。

<template>
    <u-navbar title=" " bgColor="rgba(0,0,0,0)" @leftClick="goback" :safeAreaInsetTop='true'>
        <view slot="left">
            <view class="nav">
                <image
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAeCAYAAABNChwpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMC1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi40IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU2QTMwNkQzNEE3MjExRUM4Mjc4RDREOTBFODA0QzlGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU2QTMwNkQ0NEE3MjExRUM4Mjc4RDREOTBFODA0QzlGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTZBMzA2RDE0QTcyMTFFQzgyNzhENEQ5MEU4MDRDOUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTZBMzA2RDI0QTcyMTFFQzgyNzhENEQ5MEU4MDRDOUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DSOx+AAAA9UlEQVR42mJgIB0wAnEvEP8G4i1AzMJARwCyfDoQ/0fClvR0wBQ0y98DsQi9LO9As/wbPX2PzXInelnePJCWV6BZ/nMgLf8FxH70srx4IC3PHEyW/wXiKHpZnozF8mh6WR4NtZDuloPK9jAgXg7ETEjioCL2Eo3tBlVmvYxQywQYBga8Y4KWbAMFvoFCwBGItwIxJ5LEByDeSGPLf0GrdjAAFa8/0HJBBb2Dww/qqkHniAJ6OyIYrUz4Dy0h6QqiB6sjYujtiPSBrB/w1ZAR9HZEzkC2EQZFEw2XI74DsQy9HdGE5gjHgajFaqDV+HpKO6cAAQYAERd/qwJlk/AAAAAASUVORK5CYII="
                    class="image" />
                <text class="title">{{title}}</text>
            </view>
        </view>
        <view slot="right">
        </view>
    </u-navbar>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        onShow() {

        },
        props: {
            title: {
                type: String,
                default () {
                    return '';
                }
            }
        },
        methods: {
            goback() {
                uni.navigateBack({

                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .nav {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;


        image {
            width: 38rpx;
            height: 35rpx;
            margin-right: 34rpx;
        }

        .title {
            font-size: 40rpx;
            font-family: Helvetica;
            color: #000000;
        }

    }
</style>