小程序自定义顶部导航栏

效果

//xx.wxml

        
            
            
        
        
          
          
        
       //空标签给胶囊占位子
        
    

//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"
}