小程序页面自定义顶部到航栏

小程序顶部到航栏可全局设置也可以局部设置 全局设置只需在app.json中window对象添加"navigationStyle": “custom"配置，然后每个页面的顶部导航条都是自定义的 局部设置（单个页面），在你需要自定义的页面的json文件中添加"navigationStyle”: "custom"配置即可

首先获取顶部导航栏的高度，注意ios和安卓的高度不一样

全局方法 app.js

customNavbar() {
    var sysinfo = wx.getSystemInfoSync()
    var statusHeight = sysinfo.statusBarHeight
    var isiOS = sysinfo.system.indexOf('iOS') > -1 // 判断ios终端
    var navHeight = 0;
    if (!isiOS) { // 安卓的高度为48px
        navHeight = 48;
    } else {
        navHeight = 44;
    }
    // 存在全局方便使用
    this.globalData.statusHeight = statusHeight
    this.globalData.navHeight = navHeight
}

在页面中获取方法 并 使用

const app = getApp();
this.setData({
    navHeight_c : app.globalData.navHeight,
    statusHeight: app.globalData.statusHeight
});

.wxml 中使用

高度要使用 px 单位

<view class='navbar' style='height:{{navHeight_c + statusHeight}}px'>
    <image src="/images/top_bg.jpg" class="top_bg" style='height:{{navHeight_c + statusHeight}}px'></image>
    <!-- 撑开statusHeight高度 -->
    <view style="height: {{statusHeight}}px"></view>
    <view class='flex_c' style='height:{{navHeight_c}}px;'>
        <image src='{{logoUrl}}' class="logo"></image>
        <view class='search acea-row row-middle' bindtap='setGoodsSearch'>
            <text class='iconfont icon-xiazai5'></text>搜索商品
        </view>
    </view>
</view>

页面内容部分使用 padding-top 隔开安全距离

如果对你有帮助，点个赞再走吧~谢谢

关注我，不定时分享技术干货~