uniapp--自定义头部

1、下载插件： https://ext.dcloud.net.cn/plugin?name=uni-nav-bar

2、页面引入：

<template>
    <view class="container">
        <uni-nav-bar :fixed="true" status-bar  class="nav-wrap">
            <template v-slot:left>
                <view class="city">
                    <view>
                        {{ city }}
                    </view>
                    <image src="../../static/arrow_down.png" mode=""></image>
                </view>
            </template>
            <view class="search-wrap">
                <image src="../../static/search.png"></image>
                <input confirm-type="search" class="ipt" type="text" placeholder="输入关键词"
                    @confirm="confirm" />
            </view>
            <template v-slot:right>
                <view class="txt">
                </view>
            </template>
        </uni-nav-bar>
    </view>
</template>

<script>
    import navBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
    export default {
        components: {
            "uni-nav-bar":navBar
        },
        data() {
            return {
                city: '北京'
            }
        },
        methods: {
        },
    }
</script>

.city {
        display: flex;
        align-items: center;
        image{
            width: 24rpx;
            height:16rpx;
            margin-left: 10rpx;
        }
    }

    .search-wrap {
        background-color: #f8f8f8;
        height: 30px;
        border-radius: 15px;
        width: 100px;
        padding:0 10px;
        display: flex;
        align-items: center;
        margin: 7px 0;
        line-height: 30px;
        image{
            flex-shrink: 0;
            width: 30rpx;
            height:30rpx;
            margin-right: 10rpx;
        }
    }
    .txt{
        width: 160px;
    }