首页 | 编程 | Java

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

2020年04月26日 作者：肥仔快乐水原文

前言

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

思路

  • 隐藏官方导航栏
  • 获取胶囊按钮、状态栏相关数据以供后续计算
  • 根据不同机型计算导航栏高度
  • 编写新的导航栏
  • 页面引用自定义导航

正文

隐藏官方导航栏

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

状态栏高度

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

const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;

胶囊高度和胶囊距上边界距离

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

新建component

// components/navigation/index.wxml
<view class="nav" style="height:{{navBarHeight}}px;">
 <view class="nav-main">
 <!-- 胶囊区域 -->
 <view 
  class="capsule-box" 
  style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;left:{{menuRight}}px;"
 >
 <!-- 导航内容区域 -->
  <slot></slot>
 </view>
 </view>
</view>

// components/navigation/index.wxss
.nav {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
}
.nav-main {
 width: 100%;
 height: 100%;
 position: relative;
}
.nav .capsule-box {
 position: absolute;
 box-sizing: border-box;
 width: 100%;
}

// components/navigation/index.js
const app = getApp()
Component({
 /**
 * 组件的初始数据
 */
 data: {
 navBarHeight: app.globalData.navBarHeight, //导航栏高度
 menuRight: app.globalData.menuRight, // 胶囊距右方间距（方保持左、右间距一致）
 menuBotton: app.globalData.menuBotton,
 menuHeight: app.globalData.menuHeight
 }
})

页面引用

页面配置引入该自定义组件

//index.json
{
 "navigationStyle": "custom",
 "navigationBarTextStyle": "white",
 "usingComponents": {
 "navigation": "/components/Navigation/index"
 }
}

页面中使用

<!-- 自定义导航 -->
<navigation>
 <view class="current-date">
  <text>4月24日</text>
 </view>
</navigation>

总结

本文主要是写自定义导航基础的东西，重点在于怎么计算自定义导航的，具体的业务和样式还需要根据自身产品来设定。如有什么问题，欢迎提出一起学习。

到此这篇关于小程序自定义导航栏兼容适配所有机型（附完整案例）的文章就介绍到这了,更多相关小程序自定义导航栏内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！

相关链接