微信小程序自定义导航栏

定义导航栏

<!--pages/list/navbar/navbar.wxml-->
<view class="navbar">
    <view class='status-bar' style="height: {{ statusBarHeight }}px;"></view>
    <view class='menu-box'>
        <view class="menu">
            <icon class="back"></icon>
            <icon class="home"></icon>
        </view>
        <view class="title">
            列表
        </view>
    </view>
</view>

/* pages/list/navbar/navbar.wxss */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
}
.navbar .status-bar{
    width: 100%;
}
.navbar .menu-box {
    position: relative;
    height: 44px;
}
.navbar .menu-box .menu {
    position: absolute;
    left: 30rpx;
    top: 0;
    height: 100%;
    z-index: 9;
}
.menu-box .menu icon {
    font-size: 38rpx;
    font-weight: bold;
    margin: 0 12rpx;
}
.menu-box .title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

获取状态栏的高度存入全局变量

// ...
onLaunch () {
    wx.getSystemInfo({
        success: res => {
            console.log(res)
            this.globalData.statusBarHeight = res.statusBarHeight
        },
    })
}
// ...
globalData: {
    statusBarHeight: 0
}

需要自定导航的页面

// 设置`json`配置页
"navigationStyle": "custom"

<!-- pages/list.wxml -->
<include src="./navbar/navbar.wxml"></include>
<view class="list" style="margin-top: {{ statusBarHeight + 44 }}px;">
  // ...
</view>

// pages/list.js
// ...
data: {
        //获取状态栏高度
        statusBarHeight: app.globalData.statusBarHeight,
}
// ...