微信小程序自定义标题栏（搜索框）

（小白学习笔记）

1.首先在需要更改页面的json文件中加入"navigationStyle":"custom" 与"usingComponents" 同级

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

如果需要整个项目所有页面都使用自定义标题栏，可以直接在app.json中的window中加入"navigationStyle":"custom"，那么你整个项目都会使用自己自定义的标题栏了

2.其次在index.wxml中加入

<!--index.wxml-->
<view>
    <!-- 自定义头部 -->
      <view class='nav bg-white' style='height:{{navH}}px'>
            <view class='nav-title'>
                  <view class="INinputheader">
                <icon class="INsearchicon" type="search" size="12"></icon>
                <input class="weui-input" name="search" placeholder="请输入关键字搜索"/>
            </view>
                </view>
          </view>
        <view class="test_b" style="margin-top:{{navH}}px">这是一个边框</view>
</view>

继续在index.wxss添加样式（如果需要全局就在app.wxss） 

/* 头部搜索 */
.nav {
    width: 100%;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    z-index: 10000000;
    position: fixed;
}

.nav-title {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100000;
    font-family: PingFang-SC-Medium;
    font-size: 36rpx;
    letter-spacing: 2px;
}

.nav .back {
    width: 22px;
    height: 22px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 15px;
}

.bg-white {
    background-color: rgb(255, 0, 0);
}

.bg-gray {
    background-color: #f7f7f7;
}

.overflow {
    overflow: auto;
}

.hidden {
    overflow: hidden;
}

.INinputheader {
    width: 60%;
    height: 30px;
    background: #efefef;
    border-radius: 30px;
    font-size: 14px;
    margin-top: 7px;
    position: relative;
    float: left;
    margin-left: 12px;
}

.INsearchicon {
    position: absolute;
    left: 20rpx;
    width: 20rpx;
    height:20rpx;
}

.weui-input {
    height: 30px;
    line-height: 30px;
    text-align: left;
    padding-left: 30px;
    letter-spacing: 0px;
}

.INtab {
    text-align: left;
    margin-left: 12px;
    color: #fff;
}
.text_b{
    display:flex;
    flex-decoration:column;
    align-items:center;
    height:1000rpx;
}

现在

wxml和wxss都写好了，因为手机各有差异，为了适配各种手机的顶部，常规的我们就需要获取标题栏的高度以此实现动态绑定高度，为了预防onLoad有时候不触发，我们直接在app.js的onLaunch的函数中加入代码：

onLaunch: function () {
        // 获取顶部栏信息
        wx.getSystemInfo({
            success: res => {
                //导航高度
                this.globalData.navHeight = res.statusBarHeight + 46;
            },
            fail(err) {
                console.log(err);
            }
        })
    }

直接获取高度，存放在与onLaunch同级

    globalData:{
        userInfo:null,
        navHeight:0
      },

接着，在需要使用的页面的js文件中先获取app，加入代码

const App = getApp();//设立顶部栏高度

获取到App实例，在onLoad中把获取到的放在data同级，即可在wxml中动态绑定使用

onLoad: function (options) {
        //自定义头部方法
        this.setData({
          navH: App.globalData.navHeight
        });
      },