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>
    <!-- <moduleSelect ref="createModule"></moduleSelect> -->
  </view>
</template>

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

const props = defineProps({
  tabIndex: Number,
});
let tabList = reactive([
  {
    iconPath: "../../static/Pk.png",
    selectedIconPath: "../../static/PkClick.png",
    text: "PK",
    pagePath: "/pages/Home/Home",
    middleClass: "",
  },
  {
    iconPath: "../../static/Forum.png",
    selectedIconPath: "../../static/Forumclick.png",
    text: "论坛",
    pagePath: "",
    middleClass: "",
  },
  {
    iconPath: "../../static/jiahao.png",
    selectedIconPath: "../../static/jiahao.png",
    text: "",
    pagePath: "/pages/c/c",
    middleClass: "",
  },
  {
    iconPath: "../../static/Message.png",
    selectedIconPath: "../../static/Messageclick.png",
    text: "消息",
  },
  {
    iconPath: "../../static/Mine.png",
    selectedIconPath: "../../static/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 (item.text === "消息") {
    uni.navigateTo({ url: "/TUIKit/components/TUIConversation/index" });
  }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;
  // left: 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;
  }

  .tab-list-default {
    background-color: #ffffff;
    border-top: 1px #dddddd solid;
  }

  .tab-list-middle {
    position: relative;

    // background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
    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>