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

相关推荐
2501_9159214322 分钟前
iOS 应用加固与苹果软件混淆全解析 IPA 文件防反编译、混淆加密与无源码加固策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2401_8854055123 分钟前
定位守护童年,科技构筑安全屏障
科技·物联网·安全·小程序·宠物·web app·智能手表
lvchaoq1 小时前
记录小程序真机bug,而模拟器无法复现
小程序·bug
Jyywww1211 小时前
uniapp uni.chooseImage+uni.uploadFile使用方法与详解
开发语言·javascript·uni-app
2501_916007474 小时前
iOS 代上架实战指南,从账号管理到使用 开心上架 上传IPA的完整流程
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915918414 小时前
iOS混淆与IPA文件加固深度解析,从反编译风险到苹果应用安全工程实践
android·macos·ios·小程序·uni-app·cocoa·iphone
毛毛三由15 小时前
【uniapp】微信小程序修改按钮样式
微信小程序·小程序·uni-app
巴博尔15 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
技术钱15 小时前
uniapp使用音频录音功能
chrome·uni-app·音视频
焚 城15 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app