tk-mini-program/components/tabBar/tabBar.vue

<template>
  <view class="tab-block">
    <ul
      class="tab-list flex flex-center"
      :class="showMiddleButton === true ? 'tab-list-middle' : 'tab-list-default'"
    >
      <li
        v-for="(item, index) in tabList"
        :class="'list-item flex flex-column flex-middle ' + item.middleClass"
        @click="handlePush(item, index)"
        :key="index"
      >
        <view class="item-img-box">
          <image
            class="item-img"
            :src="tabIndex == index ? item.selectedIconPath : item.iconPath"
          />
        </view>
        <view
          class="item-text font-20"
          :style="{ color: tabIndex == index ? '#1DD2F9' : '#A7A3A3' }"
          >{{ item.text }}</view
        >
      </li>
    </ul>
    <view @touchmove.stop.prevent="disabledScroll"> </view>
    <NewAddedPk class="createModule" ref="createModule"></NewAddedPk>
  </view>
</template>

<script setup>
import NewAddedPk from "../../pages/NewAddedPk/NewAddedPk.vue";
import VerifyLogin from "../VerifyLogin.js";
import { getCurrentInstance, defineProps, onMounted, reactive, ref } from "vue";
let showMiddleButton = ref(false);

const props = defineProps({
  tabIndex: Number,
});
let tabList = reactive([
  {
    iconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Pk.png",
    selectedIconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/PkClick.png",
    text: "PK",
    pagePath: "/pages/Home/Home",
    middleClass: "",
  },
  {
    iconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Forum.png",
    selectedIconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Forumclick.png",
    text: "论坛",
    pagePath: "/pages/Forum/Forum",
    middleClass: "",
  },
  {
    iconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/jiahao.png",
    selectedIconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/jiahao.png",
    text: "",
    pagePath: "/pages/c/c",
    middleClass: "",
  },
  {
    iconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Message.png",
    selectedIconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Messageclick.png",
    text: "消息",
  },
  {
    iconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Mine.png",
    selectedIconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Mineclick.png",
    text: "我的",
    pagePath: "/pages/Mine/Mine",
    middleClass: "",
  },
]);
onMounted(() => {
  setTabBar();
  // getSystemInfo()
});

uni.getSystemInfo({
  success: function (res) {
    // iPhone机型有横杆的导航栏高度大于40
    console.log("机型", res.deviceType);
    if (res.safeArea.top > 40) {
      console.log("苹果的底部栏大小", res.safeArea.top);
    }
  },
});

//判断中间按钮是否突出显示
function setTabBar() {
  let tabLength = tabList.length;
  if (tabLength % 2) {
    showMiddleButton.value = true;
    let middleIndex = Math.floor(tabLength / 2);
    tabList[middleIndex].middleClass = "mid-button";
  }
}
const createModule = ref();

function openPopupQuantity() {
  createModule.value.open();
}
//组件返回关闭指令
function closeSuccess() {
  // addSuccess.value.close();
}
//解决弹出层后页面还可以滚动
const disabledScroll = () => {
  return false;
};
//tab点击事件
function handlePush(item, index) {
  if (index === 3) {
    VerifyLogin().then((res) => {
      if (res) {
        uni.navigateTo({
          url: "/TUIKit/components/TUIConversation/index",
          animationType: "none",
        });
      }
    });
  } else if (index === 2) {
    //打开弹窗
    VerifyLogin().then((res) => {
    if (res) {
      openPopupQuantity();
      return;
    }
  });
  } else if (index === 4) {
    VerifyLogin().then((res) => {
    if (res) {
      uni.switchTab({
        url: "/pages/Mine/Mine",
        animationType: "none",
      });
    }
  });
  } else {
    uni.switchTab({
      url: item.pagePath,
    });
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  flex-flow: row wrap;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.flex-column {
  flex-direction: column;
  align-items: center;
}

.flex-middle {
  align-items: center;
}

.font-20 {
  font-size: 20rpx;
}

.tab-block {
  position: relative;
  position: fixed;
  bottom: 0;
  z-index: 999;
  background-size: contain;
  width: 100vw;
  background-color: #ffffff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .tab-list {
    height: 100rpx;
    padding: 0; //解决偏移
    z-index: 0;
  }
  .createModule {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 998;
    width: 100vw;
  }
  .tab-list-default {
    background-color: #ffffff;
    border-top: 1px #dddddd solid;
  }

  .tab-list-middle {
    position: relative;
    background-size: cover;
  }

  .list-item {
    flex: 1;

    .item-img-box {
      width: 38rpx;
      height: 38rpx;
      margin-bottom: 9rpx;
      position: relative;
    }

    .item-img {
      // width: 44rpx;
      // height: 42rpx;
      width: 38rpx;
      height: 38rpx;
      color: red;
    }
  }

  .mid-button {
    position: relative;

    .item-img-box {
      width: 150rpx;
      height: 150rpx;
      margin-bottom: 9rpx;
      position: absolute;
      z-index: 10;
      top: -104rpx;
    }

    .item-img {
      width: 150rpx;
      height: 150rpx;
    }

    .item-text {
      font-size: 20rpx;
      position: absolute;
      z-index: 1002;
      bottom: -40rpx;
      color: #393a41;
    }
  }

  .tab-bar {
    height: 30rpx;
    background-color: #ffffff;
  }
}
</style>