效果

//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>//空標(biāo)簽給膠囊占位子
        
    </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();
  },
  //設(shè)置狀態(tài)欄高度
  setStatusBar(){
    this.setData({menuButtonInfo:wx.getMenuButtonBoundingClientRect()});
    console.log(this.data.menuButtonInfo,'ssss');
    const { top, width, height, right } = this.data.menuButtonInfo;//?獲取膠囊信息
    wx.getSystemInfo({//獲取狀態(tài)欄信息
      success: (result) => {
        const {statusBarHeight}= result;
        const margin = top - statusBarHeight;
        this.setData({
          navHeight:(height+statusBarHeight+(margin*2)),
          searchMarginTop: statusBarHeight + margin, // 狀態(tài)欄 + 膠囊按鈕邊距
          searchHeight: height,  // 與膠囊按鈕同高
          searchWidth: right - width // 膠囊按鈕右邊坐標(biāo) - 膠囊按鈕寬度 = 按鈕左邊可使用寬度

        })
      },
    })
  },

• xx.json文件配置

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