uniapp微信小程序自定义导航栏的全过程

下面是“uniapp微信小程序自定义导航栏的全过程”的完整攻略。

1. 添加自定义导航栏组件

在uni-app项目的 /components 目录下，新建一个名为 custom-nav 的自定义组件，在 custom-nav 组件的目录下新建一个名为 custom-nav.vue 的组件模板文件。在 custom-nav.vue 文件中，我们需要定义自定义导航栏的布局，包括左边的返回按钮、中间的标题和右边的操作按钮，代码示例如下：

<template>
  <view class="custom-nav">
    <view class="custom-nav-left" @click="onClickLeft">
      <text v-if="showBack">&lt;</text>
    </view>
    <view class="custom-nav-center">
      <slot name="title"></slot>
    </view>
    <view class="custom-nav-right">
      <slot name="actions"></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'CustomNav',
    props: {
      showBack: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      onClickLeft() {
        uni.navigateBack()
      }
    }
  }
</script>

<style scoped>
  .custom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    padding: 0 14px;
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
  .custom-nav-left {
    font-size: 18px;
    color: #000;
  }
  .custom-nav-center {
    font-size: 16px;
    color: #000;
    flex: 1;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .custom-nav-right {
    font-size: 18px;
    color: #000;
  }
</style>

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

在需要使用自定义导航栏的页面中，在 <template> 标签中引入 custom-nav 组件，并在 custom-nav 标签中添加对应的属性，代码示例如下：

<template>
  <view>
    <custom-nav showBack :title="'自定义导航栏'"></custom-nav>
    <view>这是自定义导航栏页面的内容</view>
  </view>
</template>

<script>
  import CustomNav from '@/components/custom-nav/custom-nav.vue'

  export default {
    name: 'CustomNavPage',
    components: {
      CustomNav
    }
  }
</script>

在这个示例中，我们将 showBack 属性设置为 true，表示显示返回按钮。同时，将 title 属性设置为 '自定义导航栏'，表示显示页面标题。

3. 给页面添加自定义导航栏样式

在页面的 style 中，为页面的 body 元素添加 padding-top 样式，避免自定义导航栏遮挡页面内容。代码示例如下：

<style>
  body {
    padding-top: 45px;
  }
</style>

4. 示例2

对于自定义导航栏的样式和布局，可以根据具体需求进行修改和调整。下面是一个实际项目中的示例代码，实现了一个带搜索框和操作按钮的导航栏。代码如下：

<template>
  <view>
    <custom-nav showBack :title="'自定义导航栏'" :actions="[
        { text: '搜索', icon: 'search', type: 'primary', action: onSearch },
        { text: '编辑', icon: 'edit', type: 'default', action: onEdit }
      ]"
    >
      <template v-slot:title>
        <view class="search-box">
          <input type="text" class="search-input" placeholder="请输入关键词" />
          <view class="search-button" @click="onSearch">
            <text class="iconfont icon-search"></text>
          </view>
        </view>
      </template>
    </custom-nav>
    <view>这是自定义导航栏页面的内容</view>
  </view>
</template>

<script>
  import CustomNav from '@/components/custom-nav/custom-nav.vue'

  export default {
    name: 'CustomNavPage',
    components: {
      CustomNav
    },
    methods: {
      onSearch() {
        console.log('搜索')
      },
      onEdit() {
        console.log('编辑')
      }
    }
  }
</script>

<style scoped>
  body {
    padding-top: 45px;
  }
  .search-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin-right: 10px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    background-color: #f7f7f7;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .search-input {
    flex: 1;
    height: 28px;
    border: none;
    background-color: transparent;
    outline: none;
    font-size: 14px;
  }
  .search-button {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    outline: none;
    margin-left: 10px;
  }
</style>

在这个示例中，我们为自定义导航栏添加了 actions 属性，用来指定操作按钮的信息。同时，我们使用了插槽来替换 custom-nav 内部的标题，从而实现了一个带搜索框和操作按钮的导航栏。