uni-app项目中自定义搜索导航栏（三端兼容性问题处理）

说明：这里以首页

1.首先处理微信小程序端

（1）在主页面中

<!-- 搜索 -->
<!-- #ifdef MP-WEIXIN -->
<view class="header-search">
    <uni-search-bar class="uni-mt-10" radius="36" placeholder="自动显示隐藏" clearButton="auto" cancelButton="none"
        @confirm="search" bgColor="rgba(255,255,255,0.7)"/>
</view>
<!-- #endif -->

/* 搜索 */
.header-search {
    width: 100%;
    position: fixed;
    top: -10rpx;
    z-index: 2
    .search-result {
        padding-top: 10px;
        padding-bottom: 20px;
        text-align: center;
    
    .search-result-text {
        text-align: center;
        font-size: 14px;
        color: #666;
    
    .example-body {
        /* #ifndef APP-NVUE */
        display: block;
        /* #endif */
        padding: 0px;
    
    .uni-mt-10 {
        margin-top: 10px;
    
    /deep/.uni-searchbar__text-placeholder {
        color: #6d6d6d;
    
    /deep/.uniui-search {
        color: #6d6d6d !important;
    }
}

2.处理app和H5端

（1）在pages.json中配置首页

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "商城首页",
        "app-plus": {
            "titleNView": {
                "type": "transparent",
                "searchInput": {//下面是输入框样式
                    "backgroundColor": "rgba(231,231,231,.7)",
                    "borderRadius": "16px",
                    "placeholder": "请搜索宝贝名称",
                    "disabled": true,
                    "placeholderColor": "#606266"
                },
                "buttons": []
            }
        }
    }
}

（2）在首页文件中

onNavigationBarSearchInputClicked(e) {//点击跳转到搜索页面
                uni.navigateTo({
                    url: "/pages/index/search"
                })
            }