🤵 作者：coderYYY
🧑 个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享🍀欢迎和我一起交流！🚀（评论和私信一般会回！！）
👉 个人专栏推荐：《前端项目教程以及代码》

✨一、前言

这个需求在开发中还是很常见的，搜索了网络其他教程，要么太复杂要么有bug，或是没有完整代码，自己摸索实现了一个，目前没有发现bug，试了h5和微信小程序都没问题，代码算比较简洁

🚩二、具体实现

🎉1. 新建CustomTabBar组件

这里用uView的组件，当然也可以自己写一个

<template>
  <u-tabbar
    :value="current"
    @change="handleTabChange"
    :fixed="true"
    :placeholder="true"
    :safeAreaInsetBottom="true"
  >
    <u-tabbar-item
      v-for="(item, index) in tabList"
      :key="index"
      :text="item.text"
      :icon="item.icon