小程序自定义顶部导航栏

上篇博客自定义了一个底部导航栏，效果还可以，但是我在开发过程中又遇到了一个棘手的问题。就是在底部导航栏的第一个页面需要将页面沉浸到状态栏去，这就麻烦了，因为中间的容器页面无论第几个都是在外面的主界面里，而主界面需要动态的去隐藏标题栏，设计师这是在为难我胖虎？

当然也不是没有办法，这里就需要用到自定义的导航栏了，下面详细介绍。

先看效果

这个是首页的沉浸状态栏效果

这个是非首页的标题栏效果

看看代码

WXML

<!--pages/tabbar/index.wxml-->
<cover-view wx:if="{{!isStatusBar}}" style="height:{{topHeight}}rpx;background:white;"><cover-view class="center-both" style="margin-top:{{statusHeight}}rpx;height: {{naviHeight}}rpx"><cover-view>{{title}}</cover-view></cover-view>
</cover-view><view class="page-container" style="height:{{containerHeight}}rpx"><!-- 使用wx:if 不会渲染，每次点击会重走组件生命周期 --><!-- 使用display:none隐藏，仍然会渲染组件，只走一遍生命周期 --><!-- 使用hidden隐藏，和display:none一样，但是受限于块级元素，无法使用 --><!-- 用户 --><block wx:if="{{roleType=='user'}}"><home id="id0" indexpage="{{true}}" style="display: {{currentPageIndex==0?'block':'none'}};" /><user id="id1" show='{{currentPageIndex==1}}' style="display: {{currentPageIndex==1?'block':'none'}};" /></block><!-- 管理员 --><block wx:elif="{{roleType=='manager'}}"><manager id="id0" style="display: {{currentPageIndex==0?'block':'none'}};" /><log id="id1" style="display: {{currentPageIndex==1?'block':'none'}};" /></block>
</view><!-- 底部切换菜单 -->
<view class="row-center tab-container" style="height:{{104 + bottomHeight}}rpx;padding-bottom:{{bottomHeight}}rpx"><view wx:for="{{tabBar}}" wx:key="index" class="flex1 center-both col"style="color:{{index==currentPageIndex?'#0B7BFBFF':'#616161FF'}}" data-index="{{index}}" bindtap="onSelectTap"><view class="{{item.iconClass}} icon"></view><view class="text">{{item.text}}</view></view>
</view>

在昨天的基础上加了自定义的顶部导航栏，适配了一下高度，使用 cover-view 放在了最顶层。

WXSS

这里没什么变化，导航栏样式直接写在 style 里了，需要的话可以写在 wxss 里。

JSON

{"navigationStyle": "custom",...
}

配置文件里面加入上面这句话，自定义导航栏，需要微信客户端7.0支持，如果要适配的话可以去全局的 windows 里面设置。

Page.js

// pages/index/index.js
var app = getApp()Page({data: {//状态栏高度statusHeight: app.globalData.statusHeight,//导航栏高度naviHeight: app.globalData.naviHeight,//顶部高度 = 状态栏高度 + 导航栏高度topHeight: app.globalData.topHeight,//底部高度bottomHeight: app.globalData.bottomHeight,//中间内容容器高度 = 屏幕高度 - 底部安全高度 - 底部导航栏高度containerHeight: app.globalData.screenHeight - app.globalData.bottomHeight - 104,isStatusBar: true,title: '',currentPageIndex: 0,roleType: "",tabBar: [],userTabBar: [{"iconClass": "iconfont home","text": "首页","uptoStatus": true},{"iconClass": "iconfont user","text": "个人中心","uptoStatus": false},],managerTabBar: [{"iconClass": "iconfont manager","text": "管理", "uptoStatus": false},{"iconClass": "iconfont log","text": "日志",     "uptoStatus": false},]},onLoad: function (options) {let tabBar = this.data.tabBarif (options.roleType == 'user') {tabBar = this.data.userTabBar} else if (options.roleType == 'manager') {tabBar = this.data.managerTabBar}// 在此加载数据this.setData({tabBar: tabBar,roleType: options.roleType,})},// 下拉加载onPullDownRefresh() {this.selectComponent("#id" + this.data.currentPageIndex).onPullDownRefresh()},onSelectTap(event) {let index = event.currentTarget.dataset.index;   let isStatusBar = this.data.tabBar[index].uptoStatus;//中间页面高度 = 屏幕高度 - 底部安全高度 - 底部导航高度 - 顶部高度let containerHeight = app.globalData.screenHeight - bottomHeight - 104if (!isStatusBar) {containerHeight = containerHeight - this.data.topHeight}//选中页面更新this.setData({currentPageIndex: index,title: this.data.tabBar[index].text,currentPageIndex: index,isStatusBar: isStatusBar,containerHeight: containerHeight})},
})

Page中的改动就多了点，一个一个讲吧。

先引入了顶部导航栏适配需要用到的三个变量，状态栏高度、标题栏高度以及两者之和，标题栏使用 margin 在状态栏空出对应高度，再使用居中对齐使标题居中，适配效果不错。

同时引入是否沉浸状态栏和标题两个变量，isStatusBar控制是否显示顶部导航栏，标题就不用说了。

在各个标签信息里面增加了 uptoStatus 字段，确定是否要沉浸状态栏。

最后就是切换页面中，要判断选中页面是否要沉浸状态栏，如果要沉浸状态栏，还得修改中间容器的高度，同时标题也应该对应修改。

适配数据

这里也把高度适配数据贴一份吧，具体解释看前面博客。

globalData: {//系统信息systemInfo: {},//1px像素值 对应 rpxpixelRatio1: 2,//胶囊信息menuInfo: {},//屏幕高度screenHeight: 2000,//顶部高度 = 状态栏高度 + 导航栏高度topHeight: 0,//状态栏高度statusHeight: 0,//导航栏高度naviHeight: 0,//底部安全高度bottomHeight: 0,
},onLaunch: function () {var that = this;//获取设备信息let systemInfo = wx.getSystemInfoSync()that.globalData.systemInfo = systemInfo//1rpx 像素值let pixelRatio1 = 750 / systemInfo.windowWidth;that.globalData.pixelRatio1 = pixelRatio1//胶囊信息let menu = wx.getMenuButtonBoundingClientRect()that.globalData.menuInfo = menu//状态栏高度let statusHeight = systemInfo.statusBarHeightthat.globalData.statusHeight = statusHeight * pixelRatio1//导航栏高度let naviHeight = (menu.top - statusHeight) * 2 + menu.heightthat.globalData.naviHeight = naviHeight * pixelRatio1//顶部高度 = 状态栏高度 + 导航栏高度that.globalData.topHeight = (statusHeight + naviHeight) * pixelRatio1//屏幕高度let screenHeight = systemInfo.screenHeightthat.globalData.screenHeight = screenHeight * pixelRatio1//底部高度 = 屏幕高度 - 安全区域bottomlet bottom = systemInfo.safeArea.bottomthat.globalData.bottomHeight = (screenHeight - bottom) * pixelRatio1
}

结语

顶部导航栏自定义起来还是挺简单的，就是这里也有一些不如意的问题，比如在苹果手机上使用，可以一直上拉，让标题栏都划上去，但是在安卓使没问题的，机型问题就不管了，有机会调。

end

完美撒花