小程序自定义导航栏

1、在要自定义导航栏的组件json中设置，如果是全局在app.js中设置

"navigationStyle": "custom"

内容直接跑到最顶端

 

2、在根目录定义一个components文件夹，保存公共组件

3、新建一个nav文件夹，点击新建Component 

 4、下面是代码

nav.js:

// 获取右侧胶囊的盒子数据
/**
 * 组件的初始数据
 */
data: {
   meum: wx.getMenuButtonBoundingClientRect(),
},

nav.wxml:

<--上内边距设置为胶囊的上内边距，内容所需的高度再更换-->
<view style="padding-top:{{meum.top*2}}rpx; padding-bottom: 50rpx;" class="topView">
    <--此处书写自定义内容-->
    <--此处我将按钮的高设为胶囊的高，加上圆角-->
    <van-button icon="search" custom-class="topBtn" custom-style="height:{{meum.height*2}}rpx; border-radius: {{meum.height}}rpx;">搜索</van-button>
</view>

nav.wxss

.topView {
    padding-left: 50rpx;
    background-color: #5094f3 !important;
}
.topView .topBtn {
    width: 500rpx;
    border: none;
    background-color: rgb(255, 255, 255, .2);
    color: #fff;
}

5、导航栏组件书写完毕，引入组件

   （1）要引入的页面json配置文件中引用：（必须用相对路径）

"usingComponents": {
        "nav": "/components/nav/nav"
    },

   （2）页面中引入组件：

<nav></nav>
<text>内容</text>

6、最后的效果