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获取导航改变的方法。

预览

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

最后

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