关于前端: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);  }}

预览

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

目录