微信小程序八（自定义tabBar）

twx95

已于 2024-05-14 15:40:13 修改

阅读量966

点赞数 21

文章标签：微信小程序小程序

于 2024-04-25 14:51:11 首次发布

本文链接：https://blog.csdn.net/weixin_41670405/article/details/138184812

版权

本文介绍了在微信小程序中实现自定义tabBar的方法，包括在app.json中配置开启自定义tabBar，创建相应的文件结构，使用 vant 组件库，以及结合 mobx-miniprogram 进行状态管理。详细讲解了如何创建 store 对象、绑定组件和页面，以及展示 tabBar 上的数字。

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

在使用自定义tabBar的时候需要在app.json中开启使用自定义tabBar

"custom": true

注意一点list是必须加上的，微信官方文档有说明

创建自定义tabBar

tabBar名称是写死的：custom-tab-bar

文件名称也是写死的：index

在app.json生成多目录，用来实现tabBar

名称自定义

就可以看到barBar标签栏就起作用了

自定义标签栏js页面：

data: {
    list:[
      {
        "pagePath": "/pages/03/03",
        "text": "03页面", 
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "/pages/02/02",
        "text": "02页面",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "/pages/01/01",
        "text": "01页面",
        "iconPath": "/images/tabs/contact.png",
        "select