uniapp自定义顶部导航栏_uniapp自定义导航栏custom

uniapp自定义顶部导航栏分以下三步 

1.设置 "navigationStyle": "custom"：

自定义导航栏需要在page.json文件内设置 "navigationStyle": "custom" 属性，添加后自定义导航栏才生效。

2.创建一个自定义导航栏组件：

在uniapp项目的components目录下创建一个名为CustomNavigationBar.vue的组件文件，并在文件中编写以下代码：

<template>
  <view class="custom-navigation-bar">
    <view class="left" @click="navigateBack">
      <image class="back-icon" src="/static/back.png"></image>
    </view>
    <view class="title">{{ title }}</view>
    <view class="right">
      <!-- 右侧按钮或其他内容 -->
    </view>
  </view>
</template>
 
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>
 
<style scoped>
.custom-navigation-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}
 
.left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
 
.back-icon {
  width: 20px;
  height: 20px;
}
 
.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}
 
.right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>

3.在页面中使用自定义导航栏组件：

在需要使用自定义导航栏的页面组件中，引入了自定义导航栏组件CustomNavigationBar，并在页面中使用<custom-navigation-bar>标签来替代原有的导航栏。例如，在pages/home/index.vue文件中，编写以下代码：

<template>
  <view>
    <custom-navigation-bar title="首页"></custom-navigation-bar>
    <!-- 页面内容 -->
  </view>
</template>
 
<script>
import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
 
export default {
  components: {
    CustomNavigationBar
  }
}
</script>

总之，自定义导航栏更加灵活多变，根据自己需求进行设置，如果您觉得麻烦可以使用官方组件<uni-nav-bar>进行导航栏的定义。