开发中间带有+号和悬浮按钮的底部选项卡

1、新建一个uniapp项目，选择模板

2、 创建好之后，用微信开发者工具打开，默认点击【发布】，悬浮框出现，但在实际项目当中，不用每次点击【发布】tab都显示悬浮框，针对上述问题，做如下优化：

• 第一次切换到【发布】tab时，默认不显示悬浮框，页面只显示图标，且背景为白色；
• 再次点击【发布】时，悬浮框出现，背景变灰色；
• 点击灰色区域，悬浮框消失
• 来回点击【发布】，悬浮框显示与隐藏，同时页面背景色跟着变化

效果图如下：

3、修改原模板的tabbar-3.vue页面，其余保持不变

<template>
  <view class="content" :class="{'active':active}" @click="onCancleActive">
    <!-- 1 图 -->
    <image class="logo active" src="../../../static/logo.png" mode="aspectFit"></image>
    <!-- 2 悬浮按钮 -->
    <view class="tabbar-box-wrap" v-show="active">
      <view class="tabbar-box">
        <!-- 2.1 发图文 -->
        <view class="tabbar-box-item" @click.stop="goToPage('/pages/tabbar-3-detial/tabbar-3-release/tabbar-3-release')">
          <image class="box-image" src="../../../static/img/release.png" mode="aspectFit"></image>
          <text class="explain">发图文</text>
        </view>
        <!-- 2.2 发视频 -->
        <view class="tabbar-box-item" @click.stop="goToPage('/pages/tabbar-3-detial/tabbar-3-video/tabbar-3-video')">
          <image class="box-image" src="../../../static/img/video.png" mode="aspectFit"></image>
          <text class="explain">发视频</text>
        </view>
        <!-- 2.3 提问 -->
        <view class="tabbar-box-item" @click.stop="goToPage('/pages/tabbar-3-detial/tabbar-3-qa/tabbar-3-qa')">
          <image class="box-image" src="../../../static/img/qa.png" mode="aspectFit"></image>
          <text class="explain">提问</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        active: true
      };
    },
    onShow() {
      console.log("1-onShow");
      // #ifdef MP-WEIXIN  
      this.active = true;
      // #endif

      // #ifdef H5
      this.active = false;
      // #endif

    },
    onHide() {
      this.active = false;
    },
    onTabItemTap(obj) {
      console.log("2-onTabItemTap");
      if (obj) {
        this.active = !this.active;
      }
    },
    methods: {
      onCancleActive() {
        this.active = false;
      },
      goToPage(url) {
        if (!url) return;
        uni.navigateTo({
          url
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    /* #ifdef H5 */
    height: calc(100vh - var(--window-bottom) - var(--window-top));
    /* #endif */

    /* #ifndef H5 */
    height: 100vh;
    /* #endif */
    background: #fff;

    &.active {
      background: #999;
    }

    // 渐变效果
    // transition: opacity 0.3s;
    // opacity: 0;
    // &.active {
    // 	opacity: 1;
    // }

    .logo {
      position: relative;
      margin-top: -400upx;
      width: 200upx;
      height: 200upx;
      // z-index: -1;
      // opacity: 0;
      // transition: opacity 0.3s;
      // &.active {
      // 	opacity: 1;
      // }
    }
  }

  .tabbar-box-wrap {
    position: absolute;
    width: 100%;
    padding: 50upx;
    box-sizing: border-box;
    bottom: 0;
    left: 0;

    .tabbar-box {
      position: relative;
      display: flex;
      width: 100%;
      background: #fff;
      border-radius: 20upx;
      padding: 15upx 20upx;
      box-sizing: border-box;
      z-index: 2;
      box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);

      &:after {
        content: '';
        position: absolute;
        bottom: -16upx;
        left: 0;
        right: 0;
        margin: auto;
        width: 50upx;
        height: 50upx;
        transform: rotate(45deg);
        background: #fff;
        z-index: 1;
        box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
        border-radius: 2px;
      }

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        border-radius: 20upx;
        z-index: 2;
      }

      .tabbar-box-item {
        width: 100%;
        z-index: 3;
        margin: 10upx;
        color: $uni-color-subtitle;
        text-align: center;
        font-size: $uni-font-size-base;

        .box-image {
          width: 100%;
          height: $uni-img-size-lg;
        }
      }
    }
  }
</style>

注意：微信小程序和H5页面onTabItemTap()和onShow()执行顺序相反，需要做处理

onShow() {
      console.log("1-onShow");
      // #ifdef MP-WEIXIN  
      this.active = true;
      // #endif

      // #ifdef H5
      this.active = false;
      // #endif

},