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页面中引入组件

相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所4 小时前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck4 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
贝格前端工场6 小时前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld6 小时前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json6 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
来碗盐焗星球8 小时前
记一次微信小程序AI开发的血泪史
前端·微信小程序
说私域9 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域12 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
The_era_achievs_hero19 小时前
微信小程序71~80
微信小程序·小程序