乐趣区

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

jiezi

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

目录

  • 筹备导航素材
  • 配置页面导航
  • 自定义导航栏

筹备导航素材

要自定义底部导航栏，咱们须要到 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获取导航扭转的办法。

预览

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

最初

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

退出移动版