uni-app 自定义底部tabbar

在uni-app中，你可以通过以下步骤来实现自定义底部tabbar：

1. 在main.js文件中添加以下代码段，以解决点击两次才能选择icon的问题：

Vue.mixin({
  methods: {
    setTabBarIndex(index) {
      if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
        this.$mp.page.getTabBar().setData({ selected: index })
      }
    }
  }
})

2. 在index.wxss文件中重新定义tabbar的样式，包括背景、高度、字体大小等。以下是一个例子：

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.05);
  box-sizing: content-box;
}

.tab-bar-item {
  flex: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fff;
  height: 120rpx;
}

/* 自定义样式 */
.tab-bar-item.diy {
  margin-top: 0!important;
  background: transparent;
  position: relative;
  flex: inherit;
  width: 134rpx;
}

.tab-bar-item image {
  width: 48rpx;
  height: 48rpx;
  overflow: initial;
}

.tab-bar-item view {
  font-size: 24rpx;
}

.tab-bar-item image.diy {
  position: absolute;
  width: 134rpx;
  height: 140rpx;
  bottom: 25.6%;
  z-index: 100;
}

.tab-bar-item view.diy {
  margin-top: 90rpx;
  background: #fff;
  width: 100%;
  height: 100%;
  padding-top: 58rpx;
  z-index: 99;
}

通过以上步骤，你可以在uni-app中实现自定义底部tabbar。使用以上的代码段和样式定义，你可以根据需求自定义底部tabbar的样式和交互效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [uni-app-tabbar:uni-app底部初步实现（不支持小程序）](https://download.csdn.net/download/weixin_42172572/15923240)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [uni-app自定义底部tabbar](https://blog.csdn.net/Janent168/article/details/129809136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]