小程序自定义顶部导航栏

//xx.wxml
<view class="y_custom_search y_common_fbox" style="height: {{navHeight}}px; >
    <view class="y_common_zbox y_common_flex" style="height: {{navHeight}}px;" >
        <view class="y_back" style="margin-top:{{searchMarginTop}}px; height: {{searchHeight}}px;line-height: {{searchHeight}}px;">
            <image src="http://xxxxxx/fanhui_03.png" alt="" />
            <!-- <text>返回</text> -->
        </view>
        <view class="y_cssearch" style="margin-top:{{searchMarginTop}}px; height: {{searchHeight}}px;">
          <text class=" iconfont icon-guanbi"></text>
          <input id="y_csearch" type="text"  
          confirm-type='search'placeholder="搜索本店商品" />
        </view>
       <view style="width: {{100% - searchWidth}}px"></view>//空标签给胶囊占位子
        
    </view>
</view>

//xx.wxss
/*header  */
.y_custom_search {position: fixed;top: 0;left: 0;width: 100%;}
.y_custom_search .y_common_zbox{ justify-content: space-between;align-items: center;width: 100%;}
.y_custom_search .y_back {width: 60rpx;text-align: center;}
.y_custom_search .y_back>image,.y_custom_search .y_back>text{vertical-align: middle;}
.y_custom_search .y_back image{width:17rpx;height: 31rpx;margin-right: 5rpx;}
.y_custom_search .y_back text{font-size: 28rpx;color: #3269ff;}
.y_custom_search .y_cssearch{padding-left: 20rpx;width:500rpx;height: 60rpx;border-radius:30rpx;background: #eeeeee;line-height:60rpx;font-size:26rpx ;color:#666 ;white-space: nowrap;}
.y_custom_search .y_cssearch>input{width: 400rpx;height: 60rpx;border-radius:30rpx;border: none;outline: none;line-height:60rpx;font-size:26rpx ;color:#666 ;display: inline-block;vertical-align: middle;}
.y_custom_search .iconfont{font-size: 28rpx;display: inline-block;margin-right: 12rpx;vertical-align: middle;}
.y_custom_search .y_cssearch>input::placeholder{color: #999999 !important;}

//xx.js
 onLoad(options) {


    this.setStatusBar();
  },
  //设置状态栏高度
  setStatusBar(){
    this.setData({menuButtonInfo:wx.getMenuButtonBoundingClientRect()});
    console.log(this.data.menuButtonInfo,'ssss');
    const { top, width, height, right } = this.data.menuButtonInfo;//?获取胶囊信息
    wx.getSystemInfo({//获取状态栏信息
      success: (result) => {
        const {statusBarHeight}= result;
        const margin = top - statusBarHeight;
        this.setData({
          navHeight:(height+statusBarHeight+(margin*2)),
          searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
          searchHeight: height,  // 与胶囊按钮同高
          searchWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度

        })
      },
    })
  },

• xx.json文件配置

{
  "usingComponents": {},
  "navigationStyle": "custom"
}