uniapp项目实践总结(六)自定义顶部导航栏

本篇主要讲述如何自定义顶部导航栏，有时候默认导航栏不足以满足我们的需求，这时候就需要自定义导航栏来解决这个问题。

默认导航

自带的默认顶部导航设置的内容有限，不容易扩展修改，因此如果有更加个性化的需求，则需要自定义顶部导航。

配置如下：

json 复制代码

"globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "HelloApp",
    "navigationBarBackgroundColor": "#333",
    "backgroundColor": "#f8f8f8"
}

更多配置查看：uniapp.dcloud.net.cn/collocation...

修改配置

在pages.json文件中的globalStyle加一个配置。

json 复制代码

"globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "HelloApp",
    "navigationBarBackgroundColor": "#333",
    "backgroundColor": "#f8f8f8",
    "navigationStyle": "custom"
}

这样我们就可以自定义顶部导航了。

自定义顶部

使用官方插件

基本用法如下：

html 复制代码

<uni-nav-bar left-icon="left" right-icon="cart" title="标题" left-text="返回" right-text="设置" />

自己编写组件

有时候官方的自定义顶部导航可能还是达不到我们的需求，这时候可以自己编写一个自定义顶部导航组件，更加灵活高效。

编写组件

在components下面新建文件夹q-navbar和文件q-navbar.vue。

html 部分

这部分就是使用flex布局的一个导航，里面是否绑定了很多父组件的消息，可以自定义左边、中间、右边的图标、名称和是否显示。

还有一个特色就是如果不想使用默认的，可以使用slot插槽自己写适合自己的那块内容。

html 复制代码

<view
  class="q-navbar"
  :style="{'color': props.color,  'backgroundColor': props.bgColor, 'border-bottom': `2rpx solid ${props.borColor}`}">
  <slot name="navbar">
    <view class="q-navbar-left">
      <slot name="left">
        <view class="q-navbar-item" @click="clickSet('left')" v-if="props.left.show">
          <q-icon
            class="q-navbar-icon"
            :name="props.left.icon"
            :size="18"
            color="#333"
            v-if="props.left.icon" />
          <text class="q-navbar-text" v-if="props.left.name">{{props.left.name}}</text>
        </view>
      </slot>
    </view>
    <view class="q-navbar-center">
      <slot name="center">
        <view class="q-navbar-item" @click="clickSet('center')" v-if="props.center.show">
          <q-icon
            class="q-navbar-icon"
            :name="props.center.icon"
            :size="18"
            color="#333"
            v-if="props.center.icon" />
          <text class="q-navbar-text" v-if="props.center.name">{{props.center.name}}</text>
        </view>
      </slot>
    </view>
    <view class="q-navbar-right">
      <slot name="right">
        <view class="q-navbar-item" @click="clickSet('right')" v-if="props.right.show">
          <q-icon
            class="q-navbar-icon"
            :name="props.right.icon"
            :size="18"
            color="#333"
            v-if="props.right.icon" />
          <text class="q-navbar-text" v-if="props.right.name">{{props.right.name}}</text>
        </view>
      </slot>
    </view>
  </slot>
</view>

样式部分

scss 复制代码

.q-navbar {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30rpx;
  width: 100%;
  height: $navBarHei;
  background: $f8;
  .q-navbar-item {
    display: flex;
    align-items: center;
    width: 100%;
    .q-navbar-icon {
      padding: 0 5rpx;
    }
    .q-navbar-text {
      margin-left: 10rpx;
    }
  }
  .q-navbar-left,
  .q-navbar-right {
    max-width: 120rpx;
    width: 100%;
  }
  .q-navbar-left {
    .q-navbar-item {
      justify-content: flex-start;
    }
  }
  .q-navbar-right {
    .q-navbar-item {
      justify-content: flex-end;
    }
  }
  .q-navbar-center {
    flex: 1;
    text-align: center;
    .q-navbar-item {
      justify-content: center;
    }
  }
}

在uni.scss里面加入：