小程序组件的自定义顶部导航示例

前言

凭借“不占内存，即用即走”的特点，以及微信的社交性质，微信的用户数一路保持快速增长。对其应用的要求日益提高，使用更加多样化和个性化。其中，顶部导航的自定义实现因其交互功能成为了一个需要实现的常见组件，也因如何更优雅地实现不同设备下的风格兼容成为了讨论的热点。

让我们详细阐述一下它的设计、实现和使用，让大家对这个组件有更多的了解。如果原创文章有问题，欢迎指出指正。

定制导航设计

接口设计

目前大多数小程序设计自定义导航：标题居中；胶囊包装返回上一页的左侧按钮和主页按钮应与右侧系统的默认胶囊样式布局一致。效果如下：

作用设计

主要功能如下：

自定义小程序顶部导航：微信版本号7没有这个功能转到首页：首页没有这个功能返回：没有上一页没有这个功能模拟系统默认样式：与系统默认的右胶囊样式一致在中心显示标题：省略号代替详细实现字数过多时。

布局样式的实现

实现该组件的主要重点是不同设备上的风格兼容性。由于右胶囊在不同设备下的性能不同，所以左胶囊的布局样式应与不同设备相适应，即在给出左胶囊的值之前，应计算左胶囊的高度距离等样式数据。因此，难点在于如何获得这些价值。在对单个手机进行一些兼容的踩踏操作后(此处省略10，000字.)，最终得到了正确的解决方案(感谢小伙伴们在雪地里的帮助)，那就是wx . getmenubuttonboundingclienter()，一劳永逸。

wx . getmenubuttonboundingclient er()获取菜单按钮(右上角的胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。菜单按钮的布局位置信息：宽(px)高(px)上边界坐标(px)右边界坐标(px)下边界坐标(px)左边界坐标(px)

有了这个关键点，让我们一步一步地向您展示如何优雅而完美地实现这个组件。

首先，获取布局信息对象：

让menu rect=wx . getmenubuttonboundingclient er()1。实施左胶囊

获取左侧胶囊的高度：

这个。height _ capsule=menurect。高度分配给视图：

view class=' nav _ capsule ' style=' height : { { height _ capsule } } px '然后，利用flex对胶囊内部进行了布局，并对部分细节进行了处理，完成了胶囊的个性化实现。

2.将左胶囊与右胶囊对齐

外包一层父视图，即导航栏。用与右侧相同的上边距和下边距填充导航栏。

view class=' nav bar ' style=' padding-top : { { PaddingTop } } px；' padding-bottom : { { padding bottom } } px；'获取利润值：

这个。填充顶部=菜单。在这上面。填充底部=菜单。top-wepy。getsysteminfosync()。statusbarheight。此时，实现对准效果。

3.自定义标题垂直和水平居中

我们在导航栏中进行灵活布局。因为右胶囊是系统默认的，要居中标题栏，我们需要做一个右胶囊占位，同时设置导航左右两边的距离。

设置导航周围的内部边距：

左填充left:20rpx填充-右侧right:20rpx右胶囊占有率：

view class=' nav _ right ' style=' height : { { height _ capsule } } px；width: { { width _ capsule } } px'/viewthis。width _ capsule=menurect。宽度此时，标题栏位于中心位置。然后对齐垂直和水平居中和省略号控件。

4.改进导航栏的布局风格

以上，一个自定义导航栏的样式布局基本完成。但是它仍然需要一些完美才能优雅地使用。

-设置定位：当被任何页面调用时，使其位于窗口顶部。

位置：固定；top : 0；设置级别：当任何页面调用它时，使它位于页面中最高级别窗口的前面。

z-index : 99999；添加占位符：使其被任何页面调用而不阻塞其他页面元素。

view class=' placeholder ' wx : if=' { { nav bar . flag } } ' style=' height : { { height } } px '/view this . height=menurect . bottom this . padding bottom；占位符{ width : 100%；}然后，用视图包装navbar和占位符，这是一个完美的自定义导航栏。

功能实现

1.显示自定义小程序的顶部导航

要自定义导航，您需要在单个页面中设置参数：

config={ navigationstyle : ' custom ' }；因为在定制本地页面时，

客户端版本低于7.0.0，navigationStyle仅在app.json中生效

所以我们要判断版本的兼容性，是否显示自定义导航。

this . nav bar . flag=wx . getsysteminfosync()。)[0]=7 ?true : false view class=' nav bar-box ' wx : if=' { { nav bar。标志}}' 2。显示按钮返回上一页

如果没有上一页，则无需返回上一页功能：

this.showBack=getCurrentPages()。长度1？true : false button class=' nav _ back ' @ tap=' nav back ' wx : if=' { { show back } } '如果不显示此按钮，则只剩下home按钮，分隔线应隐藏：

view class=' divide ' wx : if=' { { show back } } '/view至此，一个自定义导航组件完全实现。童鞋还在为兼容性不知所措或者需要适应很多问题的时候打电话。看看你能不能在这里展颜。完整的代码如下所示：

Github分享：github.com/linger777/x…

Gitee分享：gitee.com/linger777/x…

小程序片段分享：developers.weixin.qq.com/s/AzGaZTmV7…

需要童鞋。下面是如何使用它：

说明

定义页面自定义顶部导航

config={ navigationstyle : ' custom ' }；引入组件

从“@/components/navbar new”导入navbar以注册组件

组件={navbar，}调用组件

nav bar 3360 nav bar . sync=' nav bar '/nav bar赋值

data={ nav bar : { flag : true，//是否使用navbar title: '顶部导航'，//自定义导航标题高度： '' //导航高度}。}如果页面遇到粘性\固定视图，可以根据需要添加样式进行调整

style='top: {{navbar.flag？' nav bar . height : { 0 } } rpx；'以上就是所有自定义顶部导航的分享。如有疑问，请留言讨论。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。