小程序 | 案例---自定义tabBar

最新推荐文章于 2024-09-27 16:15:56 发布

不爱吃菜的蔡菜

最新推荐文章于 2024-09-27 16:15:56 发布

阅读量2.2k

点赞数

分类专栏：微信小程序文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/muziqwyk/article/details/127325168

版权

本文介绍了如何在小程序中实现自定义tabBar，包括配置信息、添加代码文件、编写代码等步骤，并详细讲解了如何渲染tabBar、显示数字徽标、切换页面效果以及修改选中项文本颜色。涉及到的技术点包括自定义组件、Vant组件库、MobX数据共享、组件样式隔离和数据监听。

摘要由CSDN通过智能技术生成

案例效果

通过让页面数字增加，tabBar上面的数字也增加。

在这里插入图片描述

在此案例中，用到的主要知识点如下：

自定义 tabBar 分为 3 大步骤，分别是：

详细步骤，可以参考小程序官方给出的文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

在这里插入图片描述

在代码根目录下添加入口文件

在这里插入图片描述

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。

另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

Vant Weapp ------tabBar标签栏 ⭐看文档！！！！
https://youzan.github.io/vant-weapp/#/tabbar

在这里插入图片描述