19 | 页面链接组件：如何自定义一个导航栏？-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

### 章节 19 | 页面链接组件：如何自定义一个导航栏？

在微信小程序的开发过程中，导航栏作为用户界面的重要组成部分，不仅承载着页面间的跳转功能，还直接影响用户的操作体验和视觉感受。微信小程序官方提供了一套基本的导航栏（即顶部标题栏），但为了满足个性化设计需求，很多时候我们需要自定义导航栏。本章将详细介绍如何在微信小程序中自定义一个导航栏，包括其基本原理、实现步骤、常见问题及解决方案。

#### 一、理解自定义导航栏的必要性

- **个性化设计**：官方导航栏样式相对固定，难以满足所有应用场景的个性化需求，如颜色、图标、按钮位置的自定义。
- **提升用户体验**：通过自定义导航栏，可以更加灵活地控制页面跳转逻辑，如添加返回首页、侧边栏展开等自定义功能按钮。
- **实现复杂交互**：在需要复杂交互逻辑的页面中，如分页显示、动态标题变化等，自定义导航栏能够提供更灵活的解决方案。

#### 二、自定义导航栏的基本原理

自定义导航栏的核心思想是在页面的`.wxml`文件中手动编写导航栏的结构，在`.wxss`中定义样式，并通过`.js`逻辑控制导航栏的行为。由于微信小程序的页面结构默认包含官方导航栏，因此自定义导航栏的第一步通常是隐藏官方导航栏，这可以通过在`app.json`或页面`json`配置文件中设置`navigationStyle`为`custom`来实现。

#### 三、实现步骤

##### 3.1 隐藏官方导航栏

在需要自定义导航栏的页面的`json`配置文件中，添加或修改`navigationStyle`属性为`custom`：

```json
{
  "navigationStyle": "custom"
}
```

##### 3.2 编写导航栏结构

在页面的`.wxml`文件中，定义导航栏的HTML结构。通常包括返回按钮、标题、以及可能的更多操作按钮。

```html
<view class="custom-navbar">
  <view class="navbar-left" bindtap="onBackTap">
    <image src="/images/back.png" mode="aspectFit" class="back-icon"></image>
  </view>
  <view class="navbar-title">{{title}}</view>
  <view class="navbar-right">
    
  </view>
</view>
```

##### 3.3 定义导航栏样式

在页面的`.wxss`文件中，定义导航栏的样式，包括颜色、字体、间距等。

```css
.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-left, .navbar-title, .navbar-right {
  display: flex;
  align-items: center;
}

.back-icon {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

.navbar-title {
  font-size: 16px;
  color: #333;
  flex: 1;
  text-align: center;
}
```

##### 3.4 控制导航栏行为

在页面的`.js`文件中，定义返回按钮的点击事件处理函数，以及其他可能的逻辑。

```javascript
Page({
  data: {
    title: '当前页面标题'
  },
  onBackTap: function() {
    wx.navigateBack({
      delta: 1
    });
  }
  // 其他逻辑...
});
```

#### 四、常见问题及解决方案

##### 4.1 滚动穿透问题

当页面内容较多，需要滚动查看时，如果导航栏是固定的，可能会遇到滚动时内容穿过导航栏的情况。这通常是因为导航栏的定位和页面内容的`padding-top`或`margin-top`没有正确设置。

**解决方案**：确保页面内容的`padding-top`或`margin-top`与导航栏的高度一致，或者使用`view`标签包裹内容并设置`padding-top`。

##### 4.2 导航栏遮挡内容

在某些情况下，尤其是页面顶部有重要信息展示时，自定义的导航栏可能会遮挡住这些内容。

**解决方案**：可以通过调整导航栏的`z-index`（虽然大多数情况下默认即可），或者修改页面内容的布局来避免遮挡。

##### 4.3 适配不同屏幕尺寸

由于微信小程序支持多种屏幕尺寸的设备，自定义导航栏的样式和布局可能需要进行适配。

**解决方案**：使用`rpx`单位进行布局，确保在不同屏幕尺寸下都能保持良好的显示效果。同时，可以利用媒体查询（虽然微信小程序不支持传统的CSS媒体查询，但可以通过`wx.getSystemInfo`获取设备信息后动态调整样式）来针对不同尺寸的屏幕做特殊处理。

#### 五、总结

自定义微信小程序导航栏是一个既实用又富有挑战性的任务。通过理解其基本原理，按照正确的步骤实现，并妥善处理常见问题，我们可以为小程序用户提供更加个性化、更加流畅的交互体验。在实际开发过程中，还需要根据具体需求进行灵活调整和优化，以达到最佳的用户体验效果。

该分类下的相关小册推荐：

微信小程序与云开发(中)

微信小程序底层框架实现原理

微信小程序与云开发(下)

微信小程序全栈开发实战(下)

微信小程序全栈开发实战(中)

微信小程序与云开发(上)