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

在底部导航栏这个模块，很多时候默认的款式不合乎咱们的设计规范和需要，因而须要自定义底部导航栏，这样能够满足咱们的需要，也能够更加个性化，减少用户体验，上面就介绍如何自定义底部导航栏。

筹备导航素材

要自定义底部导航栏，咱们须要到 iconfont 下面找一些罕用的图标，而后保留成图片，存到本地图片文件夹上面。

上面是我筹备的一个图标图片文件。

配置页面导航

接下来开始进行配置，先在pages.json文件外面配置好默认底部导航栏。

{  "pages": [    //pages数组中第一项示意利用启动页，参考：https://uniapp.dcloud.io/collocation/pages    {      "path": "pages/index/index",      "style": {        "navigationBarTitleText": "首页"      }    },    {      "path": "pages/message/index",      "style": {        "navigationBarTitleText": "音讯"      }    },    {      "path": "pages/discover/index",      "style": {        "navigationBarTitleText": "发现"      }    },    {      "path": "pages/user/index",      "style": {        "navigationBarTitleText": "我的"      }    }  ],  "globalStyle": {    "navigationBarTextStyle": "white",    "navigationBarTitleText": "HelloApp",    "navigationBarBackgroundColor": "#333",    "backgroundColor": "#f8f8f8"  },  "tabBar": {    "borderStyle": "white",    "backgroundColor": "#fff",    "color": "#555",    "selectedColor": "#24afd6",    "list": [      {        "text": "首页",        "pagePath": "pages/index/index",        "iconPath": "static/image/icon/home.png",        "selectedIconPath": "static/image/icon/home-act.png"      },      {        "text": "音讯",        "pagePath": "pages/message/index",        "iconPath": "static/image/icon/message.png",        "selectedIconPath": "static/image/icon/message-act.png"      },      {        "text": "发现",        "pagePath": "pages/discover/index",        "iconPath": "static/image/icon/discover.png",        "selectedIconPath": "static/image/icon/discover-act.png"      },      {        "text": "我的",        "pagePath": "pages/user/index",        "iconPath": "static/image/icon/user.png",        "selectedIconPath": "static/image/icon/user-act.png"      }    ]  }}

自定义导航栏

有时候咱们须要定制化的需要，应用默认底部导航栏就不那么容易更改，所以这次应用自定义导航栏。

新建自定义导航栏组件

这里应用公共组件的模式自定义导航栏，可能会就义一些性能。

新建q-tabbar文件夹；
新建q-tabbar.vue组件；

html 局部

<view class="q-tabbar" :style="{'backgroundColor': props.bgColor, 'borderColor': props.borColor}">  <view    :class="{'q-tabbar-item': true, 'active': props.current == item.id}"    v-for="item in qTabbar.list"    :key="item.id"    @click="toggleNav(item)">    <q-icon      class="q-tabbar-icon"      :name="item.icon"      :size="20"      :color="`${props.current == item.id ? props.activeColor : props.color}`"      v-if="props.showIcon" />    <text      class="q-tabbar-text"      :style="{'color': `${props.current == item.id ? props.activeColor : props.color}`}"      v-if="props.showText"      >{{item.name}}</text    >  </view></view>

css 局部

.q-tabbar {  position: fixed;  bottom: 0;  left: 0;  display: flex;  justify-content: space-around;  align-items: center;  box-sizing: border-box;  padding: 12rpx 0;  width: 100%;  height: $tabBarHei;  border-top: 2rpx solid;  z-index: 99;  .q-tabbar-item {    flex: 1;    text-align: center;    font-size: 24rpx;  }}

记得在uni.scss加上变量:

/* 首页变量 */$mainColor: #24afd6;$iptBorColor: #999;$f8: #f8f8f8;$e: #eee;// 全局变量$tabBarHei: 120rpx; // 底部导航高度

js 局部

import { reactive } from "vue";import { onLoad } from "@dcloudio/uni-app";const qTabbar = reactive({  list: [    {      id: 1,      name: "首页",      icon: "home",      url: "/pages/index/index",    },    {      id: 2,      name: "音讯",      icon: "message",      url: "/pages/message/index",    },    {      id: 3,      name: "发现",      icon: "discover",      url: "/pages/discover/index",    },    {      id: 4,      name: "我的",      icon: "user",      url: "/pages/user/index",    },  ],});const props = defineProps({  // 以后导航  current: {    type: Number,    default: 1,  },  // 文字色彩  color: {    type: String,    default: "#999",  },  // 流动色彩  activeColor: {    type: String,    default: "#fff",  },  // 背景色  bgColor: {    type: String,    default: "#333",  },  // 边框色  borColor: {    type: String,    default: "#e3e3e3",  },  // 显示文字  showText: {    type: Boolean,    default: true,  },  // 显示图标  showIcon: {    type: Boolean,    default: true,  },});// 发送音讯const emits = defineEmits(["change"]);// 办法// 加载onLoad(() => {  uni.hideTabBar();});// 切换导航function toggleNav(item) {  uni.switchTab({    url: item.url,    success() {      emits("change", item);    },  });}

引入自定义导航栏组件

上次介绍过如何注册和应用全局公共组件，那么就不在须要全局引入了，间接在须要的底部导航页应用组件即可。

个别用法

<q-tabbar :current="1" />

监听切换操作

<q-tabbar :current="1" @change="changeNav" />

// 扭转导航function changeNav(item) {  console.log("底部导航：", item);}

current就是以后导航的序号。

changeNav获取导航扭转的办法。

预览

看一下自定义的成果吧，这次采纳图标显示，更加节俭体积大小。

最初

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

目录