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

相关推荐
HERR_QQ3 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
耶啵奶膘9 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
racerun11 小时前
小程序导航设置更多内容的实现方法
小程序
说私域11 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg66811 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳12 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww12114 小时前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero16 小时前
微信小程序41~50
微信小程序·小程序
耶啵奶膘1 天前
uniapp——地图路线绘制map
uni-app