【小程序】自定义顶部导航栏（左上角返回等）

思路：

明白一点，右上角的胶囊按钮是隐藏不了的，是固定在右上角的，也意味着自定义导航栏时候不用考虑它
先在需要自定义导航栏的A页面，配置"navigationStyle":“custom”【全屏】，和window属性同级
编写一个普通组件做为导航栏，高度X，甚至可以写一个搜索框在上面的。
A页面引入该组件，写好位置（在最顶部），对准胶囊按钮的位置
【最重要一步】计算高度X

实现：

【navbar.html】我这个左上角是一个icon，跳往主页

<view class='nav' style='height:{{totalHeight}}px'><view class="nav-inner" style='height:{{totalHeight}}px;padding-top: {{statusBarHeight}}px;color:{{color}};background-color: {{bgColor}};'><view  class='nav-back' style='height:{{totalHeight}}px;width:40rpx;padding-top: {{statusBarHeight}}px;margin-left:30rpx' bindtap="handleBack"><image src="https:///acf0a8c9-77a7-4a69-98ba-af879bb3057e.png" style="height:40rpx;width:40rpx"></image></view><text class='nav-title'>{{title}}</text></view>
</view>

【navbar.js】totalHeight数据我是从app实例拿来的，原因是不止一个自定义导航，所以写成公共的。只有一个点击icon的bindtap方法，比较简单，没什么代码可贴的

const { totalHeight, statusBarHeight, navBarHeight } = getApp().globalData.navbar

【app.js】重点讲怎么拿到上面的数据
先看这是配置了【全屏】的效果，是不是离上方【状态栏】还有距离？刘海旁边就是你手机个各种信息：时间、信号等。

其实我们只需要得到你手机状态栏高度就行了，导航栏用一个写死的高度。就这么简单（网上很多奇奇怪怪的高度公式，有啥用）为什么写死，也没见过平板的导航栏高度自适应变的很高吧？

那么就可以: 通过官方下面这个api获取状态栏高度

const res = wx.getSystemInfoSync()this.globalData.sysInfo = res// 设置navbar高度const statusBarHeight = res.statusBarHeight || 20;  //状态栏高度this.globalData.navbar = {totalHeight: statusBarHeight + 42,             //导航栏组件总高度statusBarHeight,navBarHeight: 42                              //肉眼以为的导航栏高度}

为什么有肉眼和总高度的说法，是因为你现在是全屏，你的组件是顶到了屏幕最上面，你得给状态栏留白的。其实就这么简单

【小程序】自定义顶部导航栏（左上角返回等）相关推荐

微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
小程序自定义顶部导航栏
上篇博客自定义了一个底部导航栏,效果还可以,但是我在开发过程中又遇到了一个棘手的问题.就是在底部导航栏的第一个页面需要将页面沉浸到状态栏去,这就麻烦了,因为中间的容器页面无论第几个都是在外面的主界面里 ...
微信小程序自定义顶部导航栏navigationBar
自定义navigationBar怎么做? 去掉原生导航栏. 将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉. 加上"navi ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
微信小程序实现顶部导航栏渐变
在小程序开发的过程中,会遇到一些页面上的要求,要求实现顶部导航栏的渐变如何实现,因为小程序做了一些封装,下面看看页面的布局图: 如图所示,实际上我们能够操作的页面只有中间那一块,那么,如果客户需要使用 ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...

【小程序】自定义顶部导航栏（左上角返回等）

思路：

实现：

【小程序】自定义顶部导航栏（左上角返回等）相关推荐

最新文章

热门文章