uni-app 底部tab中间的发布按钮点击不跳转页面 弹出一个模态框

在uni-app中，实现点击底部Tab中间的“发布”按钮不跳转页面而是弹出一个模态框，可以通过自定义底部Tab组件和模态框组件来实现。以下是一个简单的代码示例，展示了如何实现这一功能。

1. 自定义底部Tab组件

首先，自定义一个底部Tab组件，并在其中处理“发布”按钮的点击事件。

<!-- custom-tab-bar/index.vue -->
<template>
  <view class="tab-bar">
    <!-- 其他Tab项 -->
    <view class="tab-item">首页</view>
    <!-- 发布按钮 -->
    <view class="tab-item publish-btn" @click="showModal">发布</view>
    <view class="tab-item">我的</view>
  </view>
</template>

<script>
export default {
  methods: {
    showModal() {
      uni.showModal({
        title: '提示',
        content: '您点击了发布按钮',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            // 这里可以添加发布逻辑
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #eee;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}
.publish-btn {
  background-color: #ff6347;
  color: #fff;
}
</style>

2. 在pages.json中配置自定义TabBar

在pages.json中配置使用自定义的TabBar组件。

{
  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "", // 发布按钮不对应具体页面
        "text": "发布"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
}

3. 确保页面引用自定义TabBar组件

在App.vue或其他适当位置确保引入了自定义的TabBar组件。

<template>
  <view>
    <!-- 页面内容 -->
    <custom-tab-bar></custom-tab-bar>
  </view>
</template>

<script>
import CustomTabBar from '@/components/custom-tab-bar/index.vue';

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

通过上述步骤，你就可以在uni-app中实现点击底部Tab中间的“发布”按钮不跳转页面而是弹出一个模态框的功能。