[保姆级教程]uniapp自定义导航栏

这篇文章距离上次修改已过235天，其中的内容可能已经有所变动。

在uni-app中，可以通过全局配置或页面配置来自定义导航栏。以下是一个简单的示例，展示如何在uni-app中自定义导航栏：

全局配置自定义导航栏：

在 App.vue 中，可以使用 globalStyle 配置全局样式，包括导航栏的样式。

// App.vue
export default {
  globalStyle: {
    navigationBarBackgroundColor: '#FFFFFF', // 导航栏背景颜色
    navigationBarTextStyle: 'black', // 导航栏标题颜色，black / white
    navigationBarTitleText: '自定义导航栏', // 导航栏标题文字
  }
}

页面配置自定义导航栏：

在页面的配置文件中（.vue 文件中的 <script> 标签内），使用 navigationStyle 设置导航栏样式，并可以自定义标题。

// 页面配置示例
export default {
  navigationBarTitleText: '页面自定义标题',
  navigationStyle: 'custom' // 开启自定义导航栏
}

自定义导航栏的样式和内容：

在页面的 .vue 文件中，使用 <navigation-bar> 组件来自定义导航栏的样式和内容。

<!-- 页面文件中 -->
<template>
  <view>
    <navigation-bar title="自定义标题" backgroundColor="#333333" frontColor="#FFFFFF">
      <!-- 这里可以放置自定义的左右按钮 -->
    </navigation-bar>
    <!-- 页面的其他内容 -->
  </view>
</template>

<script>
// 导入自定义导航组件
import navigationBar from '@/components/navigation-bar.vue';

export default {
  components: {
    navigationBar
  }
}
</script>

创建自定义导航组件：

在 components 目录下创建 navigation-bar.vue 文件，定义自定义导航组件的样式和逻辑。

<!-- navigation-bar.vue -->
<template>
  <view class="navigation-bar" :style="{ backgroundColor: backgroundColor }">
    <!-- 导航栏的标题和按钮 -->
    <text class="navigation-bar-title" :style="{ color: frontColor }">{{ title }}</text>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    backgroundColor: {
      type: String,
      default: '#FFFFFF'
    },
    frontColor: {
      type: String,
      default: '#000000'
    }
  }
}
</script>

<style>
.navigation-bar {
  /* 自定义样式 */
}
.navigation-bar-title {
  /* 标题样式 */
}
</style>

通过以上步骤，你可以为uni-app应用创建自定义的导航栏。记得在页面配置中将 navigationStyle 设置为 custom 来开启自定义导航栏，并在页面中引入和使用自定义导航组件。

[保姆级教程]uniapp自定义导航栏

评论已关闭

推荐阅读