UniApp 导航栏设置完全指南」：新手入门必备，图标、颜色、返回功能全解析！「手把手教你玩转 UniApp 导航栏设置，轻松打造个性化页面！」「UniApp 顶部导航栏详解：一步步实现颜色、返回

最新推荐文章于 2025-04-09 14:11:35 发布

南北极之间

最新推荐文章于 2025-04-09 14:11:35 发布

阅读量2.9k

点赞数 12

分类专栏：小程序文章标签： uni-app vue.js 前端小程序微信小程序

本文链接：https://blog.youkuaiyun.com/qq_22182989/article/details/144745939

版权

小程序专栏收录该内容

54 篇文章

订阅专栏

效果图

在这里插入图片描述

在 UniApp 中，可以通过配置页面的导航栏样式和逻辑，来显示返回图标。以下是详细说明和实现方法。

方法一：自动显示返回图标

UniApp 默认会在多级页面（即从首页导航到其他页面时）自动显示返回按钮。这种情况下，无需额外配置，返回图标会自动出现在导航栏的左侧。

自动显示返回按钮的触发条件：

页面有导航栈（即通过 uni.navigateTo 进入的页面，而不是首页）。
当前页面不是应用的首页。

代码示例：

// 从首页跳转到子页面
uni.navigateTo({
  url: '/pages/child-page/child-page'
});

效果：

导航到 child-page 后，导航栏会自动显示返回按钮。
点击返回按钮会返回到上一个页面。

方法二：通过页面配置强制显示返回图标

如果希望在某些页面上强制显示返回图标，可以通过 pages.json 配置 navigationStyle 或手动调整导航栏内容。

配置方式：

在 pages.json 的页面配置中添加 navigationStyle 或相关选项：

{
  "pages": [
    {
      "path": "pages/child-page/child-page",
      "style": {
        "navigationBarTitleText": "子页面",
        "navigationBarBackgroundColor": "#3b82f6",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": false,
        "navigationStyle": "default" // 默认样式，会显示返回图标
      }
    }
  ]
}

说明：

如果当前页面是通过 uni.navigateTo 跳转进来的，上述配置会自动显示返回图标。
如果希望隐藏返回按钮，可以设置 navigationStyle: "custom"，并自行绘制导航栏。

方法三：自定义导航栏返回图标

通过 custom 自定义导航栏样式，可以完全控制导航栏的内容，包括添加自定义返回图标。

实现步骤：

在 pages.json 文件中配置页面导航栏为自定义样式：

{
  "pages": [
    {
      "path": "pages/child-page/child-page",
      "style": {
        "navigationBarTitleText": "子页面",
        "navigationBarBackgroundColor": "#3b82f6",
        "navigationBarTextStyle": "white",
        "navigationStyle": "custom" // 使用自定义导航栏
      }
    }
  ]
}

在页面 child-page.vue 中，手动实现导航栏，包括返回按钮的样式和逻辑：

<template>
  <view class="custom-nav-bar">
    <!-- 返回按钮 -->
    <view class="nav-back" @click="goBack">
      <text class="icon">&#8592;</text> <!-- 左箭头作为返回按钮 -->
    </view>
    <!-- 页面标题 -->
    <view class="nav-title">子页面</view>
  </view>
  <view class="page-content">
    <!-- 页面内容 -->
    <text>这是子页面内容</text>
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack(); // 返回到上一页
    }
  }
};
</script>

<style>
/* 自定义导航栏样式 */
.custom-nav-bar {
  height: 50px; /* 导航栏高度 */
  background-color: #3b82f6; /* 背景颜色 */
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: white;
}
.nav-back {
  flex: 0 0 auto;
  cursor: pointer;
}
.nav-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.icon {
  font-size: 20px;
}
.page-content {
  padding: 10px;
}
</style>

方法四：显示返回图标并自定义返回行为

如果希望在返回按钮上添加一些自定义行为，比如在返回之前弹出确认框，可以在 uni.navigateBack 调用前处理逻辑。

示例代码：

<template>
  <view class="custom-nav-bar">
    <!-- 返回按钮 -->
    <view class="nav-back" @click="handleBack">
      <text class="icon">&#8592;</text> 返回
    </view>
    <!-- 页面标题 -->
    <view class="nav-title">自定义返回逻辑</view>
  </view>
  <view class="page-content">
    <text>这是带自定义返回行为的页面</text>
  </view>
</template>

<script>
export default {
  methods: {
    handleBack() {
      uni.showModal({
        title: "确认返回",
        content: "您确定要离开此页面吗？",
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack(); // 执行返回
          }
        }
      });
    }
  }
};
</script>

<style>
.custom-nav-bar {
  height: 50px;
  background-color: #3b82f6;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: white;
}
.nav-back {
  flex: 0 0 auto;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.nav-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.icon {
  font-size: 20px;
}
.page-content {
  padding: 10px;
}
</style>