关于前端:uniapp项目实践总结六自定义顶部导航栏

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

目录

• 默认导航
• 批改配置
• 自定义顶部

默认导航

自带的默认顶部导航设置的内容无限，不容易扩大批改，因而如果有更加个性化的需要，则须要自定义顶部导航。

配置如下：

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

更多配置查看：https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle

批改配置

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

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

这样咱们就能够自定义顶部导航了。

自定义顶部

应用官网插件

• 官网自定义顶部导航文档
• 官网图标库文档

根本用法如下：

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

本人编写组件

有时候官网的自定义顶部导航可能还是达不到咱们的需要，这时候能够本人编写一个自定义顶部导航组件，更加灵便高效。

编写组件

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

• html 局部

这部分就是应用 flex 布局的一个导航，外面是否绑定了很多父组件的音讯，能够自定义右边、两头、左边的图标、名称和是否显示。

还有一个特色就是如果不想应用默认的，能够应用 slot 插槽本人写适宜本人的那块内容。

<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>

• 款式局部

.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 外面退出：

$navBarHei: 110rpx; // 顶部导航栏高度

• js 局部

次要是传递数据，能够依据按钮绑定的事件进行解决。

const props = defineProps({
  // 文字色彩
  color: {
    type: String,
    default: "#333",
  },
  // 背景色
  bgColor: {
    type: String,
    default: "#f8f8f8",
  },
  // 边框色
  borColor: {
    type: String,
    default: "#e3e3e3",
  },
  // 右边配置
  left: {
    type: Object,
    default() {
      return {
        name: "", // 导航名称
        icon: "arrow-line-left", // 图标名称
        url: "", // 页面地址
        isTabbar: false, // 是否导航页面
        type: "click", // 点击类型:click 默认,self 自定义
        show: true, // 是否显示
      };
    },
  },
  // 两头配置
  center: {
    type: Object,
    default() {
      return {
        name: "首页",
        icon: "",
        url: "",
        isTabbar: false,
        type: "click",
        show: true,
      };
    },
  },
  // 左边配置
  right: {
    type: Object,
    default() {
      return {
        name: "",
        icon: "more",
        url: "",
        isTabbar: false,
        type: "click",
        show: true,
      };
    },
  },
});

// 发送音讯
const emits = defineEmits(["change"]);

// 办法

// 点击设置
function clickSet(from = "center") {let info = props[from];
  info.from = from;
  if (info.type == "click") {
    let url = info.url;
    if (!url) {
      uni.navigateBack({delta: 1,});
      return;
    }
    if (info.isTabbar) {
      uni.switchTab({url: info.url,});
    } else {
      uni.navigateTo({url: info.url,});
    }
  } else {emits("change", info);
  }
}

预览

以上就是自定义顶部导航栏的次要内容，如有不足之处，请多多斧正。