uniapp微信小程序vue3自定义tabbar

在App.vue隐藏原生tabbar,也可以在pages.json中配置


二选一就好了

创建 CustomTabBar 公共组件

js 复制代码
<template>
  <view class="custom-tab-bar" :style="{paddingBottom: safeAreaHeight + 'px'}">
    <view class="tab-bar-item" :class="{'active' : props.currentPage === index}" v-for="(item, index) in tabBarList" :key="index">
      <image v-if="props.currentPage === index" :src="'../' + item.selectedIconPath" @click.stop="switchTab(item)"></image>
      <image v-else :src="'../' + item.iconPath" @click.stop="switchTab(item)"></image>
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  currentPage: Number,
})

const tabBarList = ref([
  {
    pagePath: "pages/tabbar/msg",
    iconPath: "static/tabbar/dynamic.png",
    selectedIconPath: "static/tabbar/dynamic1.png",
    text: "动态"
  },
  {
    pagePath: "pages/tabbar/static",
    iconPath: "static/tabbar/statistic.png",
    selectedIconPath: "static/tabbar/statistic1.png",
    text: "统计"
  },
  {
    pagePath: "pages/tabbar/work",
    iconPath: "static/tabbar/work.png",
    selectedIconPath: "static/tabbar/work1.png",
    text: "工作台"
  },
  {
    pagePath: "pages/tabbar/find",
    iconPath: "static/tabbar/find.png",
    selectedIconPath: "static/tabbar/find1.png",
    text: "发现"
  },
  {
    pagePath: "pages/tabbar/user",
    iconPath: "static/tabbar/my.png",
    selectedIconPath: "static/tabbar/my1.png",
    text: "我的"
  }
]);


// 切换 tab 的方法
const switchTab = (item) => {
  uni.switchTab({
    url: '/' + item.pagePath,
  })
};

let safeAreaHeight = ref(0);

onMounted(() => {
  // 获取底部安全区域高度
  uni.getSystemInfo({
    success: (res) => {
      let sHeight = res.screenHeight; // 获取屏幕高度
      let sTop = res.safeArea.bottom; // 获取安全区域底部高度
      safeAreaHeight.value = sHeight - sTop; // 计算安全区域距离底部的高度
      console.log('底部安全区域高度:', safeAreaHeight.value);
    }
  });

  uni.hideTabBar();
});
</script>

<style lang="scss" scoped>
.custom-tab-bar {
  position: fixed;
  z-index: 99;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
  padding: 5px 0;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #93A2B7;
  &.active {
    color: #24C597;
  }

  &:nth-child(3) image {
    margin-top: -18px;
    width: 80rpx;
    height: 80rpx;
  }
}

.tab-bar-item image {
  width: 24px;
  height: 24px;
}

.tab-bar-item text {
  font-size: 12px;
  margin-top: 6rpx;
}
</style>

在每个tabbar页面中引入组件

相关推荐
雪芽蓝域zzs1 小时前
uni-app倒计时公共组件 封装,倒计时组件
uni-app
2501_915918414 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520864 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾5 小时前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
悟空码字5 小时前
微信开放平台第三方平台,可以管理多个微信小程序
微信·小程序·开放平台
じòぴé南冸じょうげん5 小时前
微信小程序如何进行分包处理?
前端·小程序
说私域7 小时前
基于开源AI大模型AI智能名片S2B2C商城小程序的参与感构建研究
人工智能·小程序·开源
清风细雨_林木木9 小时前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮10 小时前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple
普通网友10 小时前
支持二次开发的代练App源码:订单管理、代练监控、安全护航功能齐全,一站式解决代练护航平台源码(PHP+ Uni-app)
安全·uni-app·php