微信小程序自定义导航教程（兼容各种手机）

（假设原文如下）

未知的世界：勇气与冒险的精神

在这个世界上，有一种无法抑制的冲动，那是对未知的渴望和的欲望。这种冲动推动我们走出舒适区，迎接新的挑战和机遇。这是一种深深植根于人类内心的勇气和冒险的精神。

我们生活的世界充满了神秘和未知。从广袤的宇宙到深邃的海洋，从神秘的史前文明到未来的科技奇迹，未知的世界如同一个巨大的磁场，吸引着我们不断前行。这种吸引力源自于我们对知识的渴望，源自于我们对新事物的好奇心。

勇气是未知世界的基石。没有勇气，我们无法跨越恐惧的鸿沟，无法面对未知的挑战。勇气让我们在黑暗中寻找光明，让我们在困境中坚持信念。只有拥有勇气，我们才能在未知的海洋中航行，才能攀登未知的高峰。

冒险的精神则是未知世界的推动力。冒险精神让我们不畏艰难，不惧失败，勇往直前。它激发我们的创新精神，激发我们的想象力，让我们敢于跨越界限，挑战自我。没有冒险的精神，我们将无法发现新的可能性，无法实现我们的梦想。

未知的世界是一个永无止境的过程。每一次的，每一次的发现，都会让我们更加了解这个世界，更加了解自己。每一次的跨越，每一次的挑战，都会让我们变得更加强大，更加勇敢。

让我们拥抱这种冲动，拥抱这种勇气和冒险的精神。让我们勇敢地迎接未知的挑战，冒险地新的领域。让我们在未知的世界的过程中，发现自己的潜力，实现自己的价值。

未知：勇气的精神之歌

在这个五彩斑斓的世界里，我们心中涌动着一种难以抑制的热情——那就是对未知的渴望和的欲望。这种激情燃烧着我们的内心，驱使着我们超越舒适区，面对新的挑战和机遇。这是深深植根于我们内心的勇气和冒险精神在歌唱。

我们的世界神秘莫测，浩瀚无垠。从深邃的宇宙到广袤的海洋，从迷雾重重的史前文明到充满可能的未来科技奇迹，未知的世界就像一个巨大的舞台，吸引着我们一步步深入。这种吸引力源自我们对知识的渴望，源自我们对新事物的好奇心。

前言

本文将详细介绍微信小程序自定义导航的相关内容，通过示例代码，让大家轻松实现兼容各种手机的自定义导航，对于学习和工作具有一定的参考价值。

一、了解小程序默认导航

微信小程序的导航栏分为两部分，第一部分为statusBarHeight，主要用于展示时间、信号和电量等信息，第二部分为titleBarHeight，展示小程序的标题栏。不同的手机，特别是刘海屏手机（如iPhone X，小米8等），这两部分的高度会有所不同。

二、自定义导航步骤

1. 全局设置

在app.json中，将window的navigationStyle设置为custom，即可实现自定义导航。

2. 确定导航栏两部分的高度

（1）通过wx.getSystemInfo获取第一部分statusBarHeight的高度。

（2）对于titleBarHeight，iPhone上默认为44px，安卓上默认为48px。

（3）将获取的高度值保存在全局对象中，以便每个页面都能使用。

示例代码：

3. 编写Navigation组件

（1）Navigation.js

这是一个自定义导航栏的组件，包含页面的标题、是否展示返回和主页按钮等属性。通过ready函数获取手机型号并计算导航栏高度。

（2）Navigation.wxml

这是自定义导航栏的视图文件，通过样式控制导航栏的高度和位置。

4. 展示效果

在不同的手机上展示效果会有所不同，但都能正常显示。

三、解决下拉刷新的问题

在自定义导航栏下，可能会出现下拉刷新时中间有一大块空白的问题。这需要通过对刷新组件的位置进行调整，确保其与导航栏底部对齐，以解决此问题。具体实现方式可参考微信小程序官方文档或相关社区论坛。

解决加载动画展示问题，巧妙隐藏于导航栏之下

（一）调整app.json中的window设置

为了让加载动画完美隐藏，我们需在app.json中的window设置进行如下调整：

1. 设置“navigationStyle”为“custom”，实现自定义导航。

2. 设置“backgroundTextStyle”为“light”，配合背景颜色“F3F3F3”，确保背景与导航栏融为一体。

3. 确定“navigationBarBackgroundColor”为“fff”，使得导航栏背景为白色。

4. 设置“navigationBarTitleText”为“ICY买手店”，展示应用名称。

5. 设定“navigationBarTextStyle”为“black”，确保导航栏文字清晰可见。

（二）修改Navigation.wxml文件

我们对Navigation.wxml文件进行了如下修改，以实现加载动画的定制与隐藏：

1. 在视图（view）元素中，通过样式设置调整标题栏的高度和内外边距。

2. 在头部（header）视图中，添加了图标显示（若存在）的相关代码，包括返回箭头和主页图标。

3. 在标题栏下方，添加了加载动画的包装视图（loading-wrap）和动态GIF图像（loading-gif），使加载过程更加生动。

实际效果如图示，虽然加载动画在细节上还需优化，但已具备一定的实用性。值得注意的是，在iPhone上展示正常，而安卓设备上仍存在一些小问题，如自定义导航栏标题和图标在滑动时的同步问题。安卓手机在进行下拉刷新操作时，动画展示仍有细微问题待解决。项目中所有使用fixed定位的元素都需要根据导航栏高度进行调整。目前，已有一些小程序开始使用自定义导航栏，如“bilibili”、“票圈长视频”等，我们公司的小程序也在规划中。

希望以上内容对大家的学习与工作有所助益。如有疑问，欢迎留言交流。感谢大家对狼蚁SEO的支持与关注。