关于uniapp自定义底部导航栏

最新推荐文章于 2026-05-21 10:41:27 发布

原创

最新推荐文章于 2026-05-21 10:41:27 发布 · 3.3k 阅读

标签

#uni-app #前端

收录于

本文介绍了如何在uniapp中自定义底部tabbar组件。首先在components创建tabbar.vue，定义所需数据和点击事件。接着在模板中渲染按钮，通过当前选中页判断显示样式。然后在main.js中注册为全局组件，最后在具体页面中引入并传递当前选中页的索引。

昨天技术组长让我用uniapp做一个h5的页面，但是设计给的设计图底部的tabbar是这样的

自己以前都是用uniapp自带的tabbar,于是乎就研究了一下如何自定义一个tabbar的组件

1.首先去components文件夹下创建tabbar.vue组件

2.先在data中定义一个数据，里面填写自己所用到的底部点击按钮，其中包括名字，选中图片的路径，未选中的图片的路径和点击之后跳转的页面。然后模板中渲染。通过prop中current的值去判断你点击了哪一个页面。

<template>
  <view class="TabBar">
    <view
      class="tab"
      v-for="(item,index) in TabBarList"
      :key="index"
      @tap="navigatorTo(item.url)"
    >
      <!-- 判断是否有点击，如果没有就不是激活样式，点击就是激活的样式 -->
      <image
        class="imgsize"
        v-if="item.type == 0"
        :src="current == index ? item.selectIcon : item.icon"
        mode=