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

小程序顶部到航栏可全局设置也可以局部设置

全局设置只需在app.json中window对象添加"navigationStyle": "custom"配置，然后每个页面的顶部导航条都是自定义的

局部设置（单个页面），在你需要自定义的页面的json文件中添加"navigationStyle": "custom"配置即可

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

   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>

code END.

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

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