uniapp导航栏添加自定义按钮在左边

admin 2026年03月21日 09:50 104 0

在uniapp中实现导航栏左边自定义按钮，需先在pages.json中配置对应页面的"navigationStyle":"custom"开启自定义导航栏，然后在页面结构中，使用绝对定位将按钮元素置于左侧，通过uni.getSystemInfoSync()获取状态栏高度，调整按钮top值以适配不同机型，按钮可添加点击事件（如@tap），实现返回（uni.navigateBack）或其他业务逻辑，注意设置合适的z-index确保按钮层级正确，同时预留导航栏高度（通常44px+状态栏高度）避免内容遮挡，自定义导航栏需手动处理标题、返回按钮等原生功能，实现灵活的页面交互设计。

Uniapp导航栏左侧自定义按钮实现方法详解

在Uniapp开发过程中,导航栏作为页面的重要组成部分，不仅承载着用户导航的功能，还直接影响着整体的用户体验，默认导航栏通常只包含返回按钮和标题文本，但在实际业务场景中，我们经常需要添加更多自定义按钮，如"返回首页"、"分享"、"菜单"等功能按钮，本文将详细介绍如何在Uniapp导航栏左侧添加自定义按钮，涵盖普通页面和tabBar页面的实现方法，以及跨平台兼容性处理技巧。

准备工作：了解导航栏配置基础

Uniapp的导航栏样式主要通过pages.json文件中的globalStyle和页面级style配置进行控制，默认情况下，导航栏包含系统返回按钮（非首页）和标题文本，要添加自定义按钮，通常有两种实现方式：

完全自定义导航栏：通过设置navigationStyle: "custom"隐藏默认导航栏，然后使用自定义view实现整个导航栏（包括左侧按钮、标题等），这种方式灵活性最高，可以完全控制导航栏的样式和功能。
扩展默认导航栏：保留部分默认导航栏功能，通过原生插件或特殊方式插入自定义按钮，这种方式实现相对复杂，且跨平台兼容性较差，不推荐在生产环境中使用。

本文将以完全自定义导航栏为例进行详细讲解，这是最稳定、兼容性最好的实现方式，能够满足大多数业务场景的需求。

普通页面实现左侧自定义按钮

配置pages.json隐藏默认导航栏

在pages.json中为目标页面添加navigationStyle: "custom"配置，这将隐藏默认导航栏：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom", // 隐藏默认导航栏
        "enablePullDownRefresh": true // 可选：启用下拉刷新
      }
    }
  ]
}

编写自定义导航栏模板

在页面.vue文件中，使用view组件自定义导航栏结构，包括左侧按钮、标题和右侧区域（可选），以下是一个完整的基础模板：

<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="custom-nav" :style="{ height: navBarHeight + 'px', paddingTop: statusBarHeight + 'px' }">
      <!-- 左侧自定义按钮 -->
      <view class="nav-left" @tap="handleLeftClick">
        <image src="/static/back.png" mode="aspectFit" class="nav-icon"></image>
        <text class="nav-text">返回</text>
      </view>
      <!-- 中间标题（可选） -->
      <view class="nav-title">页面标题</view>
      <!-- 右侧占位（避免左侧按钮被挤压） -->
      <view class="nav-right"></view>
    </view>
    <!-- 页面内容（需设置margin-top避免被导航栏遮挡） -->
    <view class="content" :style="{ marginTop: navBarHeight + 'px' }">
      页面内容区域
    </view>
  </view>
</template>

添加导航栏样式

导航栏需要固定在顶部,并适配不同平台的状态栏高度（iOS和Android状态栏高度不同），以下是完整的样式代码：

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}
.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  z-index: 999;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
.nav-left {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 44px; /* 导航栏内容高度，固定值 */
  min-width: 80px; /* 确保按钮区域有足够空间 */
}
.nav-icon {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}
.nav-text {
  font-size: 16px;
  color: #333333;
}
{
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-right {
  width: 80px; /* 与左侧按钮对称，避免标题偏移 */
}
.content {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: calc(100vh - var(--nav-bar-height));
}
</style>

动态获取状态栏和导航栏高度

不同平台的状态栏高度（如iOS的44px、Android的28px）不同，需要通过uni.getSystemInfoSync()动态获取，并计算导航栏总高度（状态栏高度+导航栏内容高度44px）：

<script>
export default {
  data() {
    return {
      statusBarHeight: 0, // 状态栏高度
      navBarHeight: 44   // 导航栏内容高度（固定值）
    }
  },
  onLoad() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
    // 处理全面屏设备（如iPhone X）的安全区域
    if (systemInfo.safeAreaInsets) {
      this.navBarHeight += systemInfo.safeAreaInsets.bottom;
    }
    // 设置CSS变量供全局使用（可选）
    document.documentElement.style.setProperty('--nav-bar-height', this.navBarHeight + 'px');
  },
  methods: {
    handleLeftClick() {
      // 返回上一页
      uni.navigateBack({
        delta: 1,
        success: () => {
          console.log('返回成功');
        },
        fail: (err) => {
          console.error('返回失败', err);
          // 如果已经是第一页，则跳转到首页
          uni.switchTab({
            url: '/pages/index/index'
          });
        }
      });
    }
  }
}
</script>

tabBar页面实现左侧自定义按钮

对于tabBar页面,实现自定义导航栏略有不同，因为tabBar页面有特殊的导航栏结构，以下是实现步骤：

配置pages.json

{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tab-home.png",
        "selectedIconPath": "static/tab-home-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "static/tab-my.png",
        "selectedIconPath": "static/tab-my-active.png",
        "text": "我的"
      }
    ]
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {

标签： #uniapp导航 #自定义左侧