效果：  参考官方网站，自定义tabBar自定义tabBar|微信开放文档1、配置信息需要在app.json中设置一个属性custom，为true，代表全局开启自定义tab注意：当我们设置了custom属性之后，那么tabBar下面的list数组是否可以删了呢？答：不可以，文档里面已经明确表示是不可以删的，需要保持完整配置项以及低版本里面可以不适用自定义tabBar，因此需要兼容、2、添加代码文件。这个目录结构是固定的，必须要在项目根目录创建一个文件夹： custom-tab-bar，以及对应的文件。第一步骤中的custom设置为true，小程序就可以自动读取该目录下的index组件，把该组件

0.前置安装步骤一安装vant组件库npmi@vant/weapp-S--production下载完后要npm构建才能使用步骤二修改app.json将app.json中的"style":"v2"去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱步骤三修改project.config.json开发者工具创建的项目，miniprogramRoot默认为miniprogram，package.json在其外部，npm构建无法正常工作。需要手动在project.config.json内添加如下配置，使开发者工具可以正确索引到npm依赖的位置。{..."setting"

0.前置安装步骤一安装vant组件库npmi@vant/weapp-S--production下载完后要npm构建才能使用步骤二修改app.json将app.json中的"style":"v2"去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱步骤三修改project.config.json开发者工具创建的项目，miniprogramRoot默认为miniprogram，package.json在其外部，npm构建无法正常工作。需要手动在project.config.json内添加如下配置，使开发者工具可以正确索引到npm依赖的位置。{..."setting"

还在担心面试不通过吗？给大家推荐一个超级好用的刷面试题神器：牛客网，里面涵盖了各个领域的面试题库，还有大厂真题哦！赶快悄悄的努力起来吧，不苒在这里衷心祝愿各位大佬都能顺利通过面试。面试专栏分享，感觉有用的小伙伴可以点个订阅，不定时更新相关面试题：面试专栏。文章目录🍋前言：🍍正文Tips1、首先我们准备好自己项目所需要的tab图标2、找到我们的pages.json文件进行配置3、配置一下导航栏标题内容4、来看看我们的成果(效果图)🎃专栏分享：🍋前言：配置底部导航栏首先需要大家准备好自己想要使用的图标，每个tab可以选择两个图标，分别为选中前的和选中后的。之后我们根据uniapp官网提供的unia

还在担心面试不通过吗？给大家推荐一个超级好用的刷面试题神器：牛客网，里面涵盖了各个领域的面试题库，还有大厂真题哦！赶快悄悄的努力起来吧，不苒在这里衷心祝愿各位大佬都能顺利通过面试。面试专栏分享，感觉有用的小伙伴可以点个订阅，不定时更新相关面试题：面试专栏。文章目录🍋前言：🍍正文Tips1、首先我们准备好自己项目所需要的tab图标2、找到我们的pages.json文件进行配置3、配置一下导航栏标题内容4、来看看我们的成果(效果图)🎃专栏分享：🍋前言：配置底部导航栏首先需要大家准备好自己想要使用的图标，每个tab可以选择两个图标，分别为选中前的和选中后的。之后我们根据uniapp官网提供的unia

💌所属专栏：【微信小程序开发教程】😀作  者：我是夜阑的狗🐶🚀个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享，欢迎咨询！💖欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信😘😘😘文章目录前言一、自定义tabBar1、案例效果2、实现步骤3、渲染tabBar上的数字徽标4、实现tabBar页面切换效果5、修改tabBar选中项文本的颜色值总结前言  大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第46篇文章;  今天开始学习微信小程序的第28天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。  专栏地址：【微信小程序开发教程

💌所属专栏：【微信小程序开发教程】😀作  者：我是夜阑的狗🐶🚀个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享，欢迎咨询！💖欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信😘😘😘文章目录前言一、自定义tabBar1、案例效果2、实现步骤3、渲染tabBar上的数字徽标4、实现tabBar页面切换效果5、修改tabBar选中项文本的颜色值总结前言  大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第46篇文章;  今天开始学习微信小程序的第28天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。  专栏地址：【微信小程序开发教程

目录前言一、tabBar介绍二、实操（创建tabBar）2.1基本配置2.2详细配置总结前言对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！本篇文章将给大家带来如何添加页面切换效果，我们前面所讲解的都是停留在某一页面上面进行预览，接下来我们将进入多页面切换的操作中！如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！一、tabBar介绍首先看一下下面的图片！在上图中，有两种选择方式，一种是在顶部切换页面的，一种是在底部切换。接下来我们将学习一下他们分别是如何实现的。tabBar最少配置两个，最多不能

目录前言一、tabBar介绍二、实操（创建tabBar）2.1基本配置2.2详细配置总结前言对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！本篇文章将给大家带来如何添加页面切换效果，我们前面所讲解的都是停留在某一页面上面进行预览，接下来我们将进入多页面切换的操作中！如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！一、tabBar介绍首先看一下下面的图片！在上图中，有两种选择方式，一种是在顶部切换页面的，一种是在底部切换。接下来我们将学习一下他们分别是如何实现的。tabBar最少配置两个，最多不能

很惭愧，这竟然是老衲在csdn的首次内容输出，还请看官，高抬贵手，多喷两句，反正我也不听~👀首先声明，我是最近才刚开始写uniapp……言归正传，最近给公司要做一个小程序，由于之前并没有实际从0开始构建开发经验，故记录下遇到的一些小难点，方便之后查阅，希望也能帮到其他小朋友，目标项目主界面如下图所示如果想实现这个效果的tabbar，那我们就只能舍弃小程序本身自带的了，在网上疯狂找了一圈，没有找到相对比较满意的解决办法，尝试后基本卡在首次加载切换时，每个页面都要初始化闪烁一下，不是很美丽，程序猿的强迫症怎么能允许！！最后结合查阅的资料结合自己的一些理解，算是比较完美的解决。思路大概是这样首先封装