uni-app tabbar 中间自定义按钮

uni-app tabbar 中间自定义按钮

tabbar 中间自定义按钮 不需要绑定页面，直接使用类似popup这样的弹出框，点击popup中的项支持跳转到页面

2 回复

自定义tabbar吧 或者使用5+的api画

更多关于uni-app tabbar 中间自定义按钮的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，tabBar 默认只能配置在底部，并且每个 tab 项的位置相对固定。然而，有时候我们需要在 tabBar 中间添加一个自定义按钮，这通常不是通过直接配置 tabBar 属性来实现的，而是需要一些额外的布局和逻辑处理。

以下是一个如何在 uni-app 中实现 tabBar 中间自定义按钮的案例：

  1. 页面布局： 首先，我们可以使用一个自定义组件来模拟 tabBar，并在其中添加自定义按钮。
<template>
  <view class="custom-tab-bar">
    <view class="tab-item" @click="navigateTo('/pages/home/home')">首页</view>
    <view class="custom-button" @click="handleCustomButtonClick">自定义按钮</view>
    <view class="tab-item" @click="navigateTo('/pages/about/about')">关于</view>
  </view>
</template>

<script>
export default {
  methods: {
    navigateTo(url) {
      uni.switchTab({
        url
      });
    },
    handleCustomButtonClick() {
      // 自定义按钮点击事件处理
      uni.showToast({
        title: '自定义按钮点击',
        icon: 'none'
      });
      // 可以添加其他逻辑，比如跳转到非 tabBar 页面
      // uni.navigateTo({ url: '/pages/detail/detail' });
    }
  }
}
</script>

<style>
.custom-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ccc;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}
.custom-button {
  width: 80px; /* 根据需要调整宽度 */
  text-align: center;
  padding: 10px 0;
  background-color: #f56c6c; /* 自定义按钮背景色 */
  color: #fff;
}
</style>
  1. 全局注册自定义 tabBar： 在 pages.json 中，将每个页面的 tabBar 配置移除，因为我们使用自定义组件来替代。
{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
    // 其他页面配置...
  ],
  "tabBar": {
    "list": [] // 留空或移除
  }
}
  1. 在应用入口引入自定义 tabBar： 在 App.vue 中引入并使用自定义的 tabBar 组件。
<template>
  <view>
    <CustomTabBar />
    <router-view />
  </view>
</template>

<script>
import CustomTabBar from './components/CustomTabBar.vue';

export default {
  components: {
    CustomTabBar
  }
}
</script>

通过以上步骤，我们实现了在 uni-app 中自定义 tabBar 并添加中间按钮的功能。

回到顶部