小程序自定义导航栏，兼容适配所有机型（附完整案例）

来源：未知浏览 156次时间 2021-06-09 04:11

大部分情况下我们都是使用微信官方自带的 navigationBar 配置但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。

思路

获取胶囊按钮、状态栏相关数据以供后续计算

小程序自定义导航栏，兼容适配所有机型（附完整案例）

根据不同机型计算导航栏高度

编写新的导航栏

页面引用自定义导航

正文隐藏官方导航栏

隐藏导航栏可以全局配置热点营销但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。

思路

隐藏官方导航栏

获取胶囊按钮、状态栏相关数据以供后续计算

根据不同机型计算导航栏高度

编写新的导航栏

页面引用自定义导航

正文隐藏官方导航栏

隐藏导航栏可以全局配置也可以单独页面配置网站引流也可以单独页面配置具体根据业务需求来。

全局隐藏

//app.json "window": { "navigationStyle": "custom" } 复制代码

页面隐藏

//page.json { "navigationStyle": "custom" } 复制代码获取胶囊按钮、状态栏相关数据以供后续计算

公式：导航栏高度 = 状态栏到胶囊的间距（胶囊距上边界距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。由公式得知我们需要获取状态栏高度胶囊高度胶囊距上距离

注：状态栏到胶囊的间距 = 胶囊到下边界距离。所以这里需要*2

状态栏高度

用 wx.getSystemInfoSync() 官方API 可以获取系统相关信息 statusBarHeight 属性可以获取到状态栏高度

const statusBarHeight = wx.getSystemInfoSync().statusBarHeight; 复制代码胶囊高度和胶囊距上边界距离

用 wx.getMenuButtonBoundingClientRect() 官方API 可以获取菜单按钮胶囊按钮的布局位置信息。

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();//胶囊相关信息 const menuButtonHeight = menuButtonInfo.height //胶囊高度 const menuButtonTop = menuButtonInfo.top//胶囊距上边界距离复制代码实例

一般情况下我们需要在运用启动的初始化生命周期钩子进行计算相关的数据也就是入口文件 app.js 的 onLaunch 生命周期钩子

//app.js App({ onLaunch: function () { this.setNavBarInfo() }, globalData: { //全局数据管理 navBarHeight: 0, // 导航栏高度 menuBotton: 0, // 胶囊距底部间距（保持底部间距一致） menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致） menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致） }, /** * @description 设置导航栏信息 */ setNavBarInfo () { // 获取系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度 this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight; this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight; this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right; this.globalData.menuHeight = menuButtonInfo.height; } }) 复制代码页面引用自定义导航 //page.wxml <view class="nav" style="height:{{navBarHeight}}px;">  <view class="capsule-box" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;"> <view class="nav-handle"> <image class="nav-back-icon" src="/images/nav_back.png" bind:tap="navToBackLastPage"></image> <image class="nav-home-icon" src="/images/nav_home.png" bind:tap="navToHomePage"></image> </view> <view class="nav-title">导航标题</view> </view> </view> 复制代码 // page.js const app = getApp() Page({ /** * 页面的初始数据 */ data: { navBarHeight: app.globalData.navBarHeight,//导航栏高度 menuBotton: app.globalData.menuBotton,//导航栏距离顶部距离 menuHeight: app.globalData.menuHeight //导航栏高度 } 复制代码封装成组件

我们可能在各自的页面实现不一样的效果比如在导航栏添加搜索框日期等这个时候我们就可以封装一个自定义组件大大提高我们的开发效率。

标签：胶囊高度 lt 导航

上一篇: 微信小程序自定义组件 - 表格组件来啦
下一篇: 解决微信小程序引用echarts视图模糊的问，视频已删除但微信相册里还有视图

小程序自定义导航栏，兼容适配所有机型（附完整案例）

热门文章

最新文章