【微信小程序】基础篇 -- 案例 - 自定义 tabBar（四十六）

昨天 8386阅读 0评论

💌 所属专栏：【微信小程序开发教程】
😀 作者：我是夜阑的狗🐶
🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享，欢迎咨询！
💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘

您的点赞、关注、收藏、评论，是对我最大的激励和支持！！！🤩 🤩 🤩

文章目录
- 前言
- 一、自定义 tabBar
- - - 1、案例效果
    - 2、实现步骤
    - 3、渲染 tabBar 上的数字徽标
    - 4、实现tabBar 页面切换效果
    - 5、修改 tabBar 选中项文本的颜色值
    - 总结
      前言
      
      大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第46篇文章;
      今天开始学习微信小程序的第28天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
      专栏地址：【微信小程序开发教程】，此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
      如果文章有什么需要改进的地方还请大佬不吝赐教👏👏，【源代码下载地址】。
      
      一、自定义 tabBar
      
      前面已经介绍了分包-独立分包 & 分包预下载，通过栗子学习了如何设置独立分包以及分包预下载。接下来就来根据前面学的知识，在案例 - 自定义 tabBar上进行实践。话不多说，让我们原文再续，书接上回吧。
      
      1、案例效果
      
      首先来看一下页面演示效果，页面中有下方标签栏是自定义 tabBar。自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。
      
      在此案例中，用到的主要知识点如下：
      - 自定义组件
      - Vant 组件库
      - MobX 数据共享
      - 组件样式隔离
      - 组件数据监听器
      - 组件的 behaviors
      - Vant 样式覆盖
        2、实现步骤
        
        首先来实现 tabBar 标签栏，自定义 tabBar 可分为 3 大步骤，分别是：
        
        Step 1、配置信息
        在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
        
        app.json
        
        { "tabBar": { "custom": true, "list": [{ "pagePath": "pages/home/home", "text": "首页", "iconPath": "/images/home.png", "selectedIconPath": "/images/home-active.png" },{ "pagePath": "pages/message/message", "text": "消息", "iconPath": "/images/message.png", "selectedIconPath": "/images/message-active.png" },{ "pagePath": "pages/contact/contact", "text": "联系夜阑", "iconPath": "/images/contact.png", "selectedIconPath": "/images/contact-active.png" }] }, }
        
        注意：当配置自定义 tarBar 页面时，list 属性不能删除，为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。
        
        Step 2、添加 tabBar 代码文件
        在代码根目录下添加入口文件，这里的文件夹名一定是 custom-tab-bar，然后在创建 index 组件（index命名也不能随便改，就用 index，否则无法识别）。
        当 custom 参数为 true 时，小程序就会自动识别 custom-tab-bar 里面的文件，并将其渲染出来。
        
        Step 3、编写 tabBar 代码
        用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。这里使用 Vant Weapp 底部导航栏，用于在不同页面之间进行切换。
        
        1、引入
        
        在 app.json 或 index.json 中引入组件，这里对组件进行全局引用，具体代码如下所示：
        
        app.json
        
        { "usingComponents":{ "my-test1": "/components/test1/test1", "my-test2": "/components/test2/test2", "my-test3": "/components/test3/test3", "my-test4": "/components/test4/test4", "my-test5": "/components/test5/test5", "van-button": "@vant/weapp/button/index", "my-numbers": "./components/numbers/numbers", "van-tabbar": "@vant/weapp/tabbar/index", "van-tabbar-item": "@vant/weapp/tabbar-item/index" }, }
        
        2、基础用法
        
        index.wxml