1d83b0295355de01bc44351b98f26d89.png
本文首发自个人自有博客:【FaxMiao个人博客】,一个关注Web前端开发技术、关注用户体验、记录前端点滴,坚持更多原创,为大家提供高质量技术博文!

前言

navigationBar相信大家都不陌生把?今天我们就来说说自定义navigationBar,把它改变成我们想要的样子(搜索框+胶囊、搜索框+返回按钮+胶囊等)。

思路

  • 隐藏原生样式
  • 获取胶囊按钮、状态栏相关数据以供后续计算
  • 根据不同机型计算出该机型的导航栏高度,进行适配
  • 编写新的导航栏
  • 引用到页面

正文

一、隐藏原生的navigationBar

window全局配置里有个参数:navigationStyle(导航栏样式),default=默认样式,custom=自定义样式。

"window"

让我们看看隐藏后的效果:

7adc4bd59bb5d10eba48447697c1bbfa.png

可以看到原生的navigationBar已经消失了,剩下孤零零的胶囊按钮,胶囊按钮是无法隐藏的。

二、准备工作

1.获取胶囊按钮的布局位置信息

我们用wx.getMenuButtonBoundingClientRect()【官方文档】获取胶囊按钮的布局位置信息,坐标信息以屏幕左上角为原点:

const 
  • width:宽度
  • height:高度
  • top:上边界坐标
  • right:右边界坐标
  • bottom:下边界坐标
  • left:左边界坐标

下面是官方给的示意图,方便大家理解几个坐标。

660884ef33ee5b2552ddc2be7016c076.png

2.获取系统信息

用wx.getSystemInfoSync()【官方文档】获取系统信息,里面有个参数:statusBarHeight(状态栏高度),是我们后面计算整个导航栏的高度需要用到的。

const 

##### 三、计算公式

我们先要知道导航栏高度是怎么组成的,

计算公式:导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度

实例 【源码下载】

自定义导航栏会应用到多个、甚至全部页面,所以封装成组件,方便调用;下面是我写的一个简单例子:

app.js

App

app.json

{
    

下面为组件代码:

/components/navigation-bar/navigation-bar.wxml

<!-- 自定义顶部栏 -->

/components/navigation-bar/navigation-bar.json

{
  

/components/navigation-bar/navigation-bar.js

const 

/components/navigation-bar/navigation-bar.wxss

.

以下是调用页面的代码,也就是引用组件的页面:

/pages/index/index.wxml

<

/pages/index/index.json

{
    

/pages/index/index.js

const 

效果图:

88955da8d9b896f33973c75f3359c89b.png

好了,以上就是全部代码了,大家可以文中复制代码,也可以【下载源码】,直接到开发者工具里运行,记得appid用自己的或者测试哦!

下面附几张其它小程序的效果图,大家也可以尝试照着做:

876cd0ac3b107615c15995eb8ba6bd07.png 12ef1bb04bfb508ff8416b00643e2a07.png

总结

  • 本文写了自定义navigationBar的一些基础性东西,里面涉及组件用法、参数传递、导航栏相关。
  • 由于测试环境有限,大家在使用时如果发现有什么问题,希望及时反馈,以供及时更新帮助更多的人!
  • 大家有什么疑问,欢迎评论区留言!

该文章版权属于weixin_39784460
摘录自:https://blog.csdn.net/weixin_39784460/article/details/110647601

相关文章:

猜你喜欢
热门标签