微信小程序自定义tabBar 组件

微信小程序使用自定义tabBar组件的要点说明

之前一直很好奇小程序的路由和tab页面切换的功能如何实现，在研究了微信原生的tabBar组件后明白了如何实现tab标签切换。

1. 配置app.json

在app.json中配置"tabBar" 属性

"tabBar": {
    "custom": true,
    "color": "#7A7E83", // 默认模式下组件未激活的字体颜色
    "selectedColor": "#3cc51f", // 默认模式下组件激活的字体颜色
    "borderStyle": "black", // 默认模式下组件的边框颜色
    "backgroundColor": "#ffffff", // 默认模式下组件的背景颜色
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/order/order",
        "text": "订单"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  },

在app.json中定义tabBar组件的相关配置：

• 将custom 属性开启，声明是自定义tabBar。
• color、selectedColor、borderStyle、backgroundColor 在custom为true时并不会渲染组件。
• list定义tabbar组件切换的页面，在之后使用wx.switchTab方法导航到tabbar组件页面的时候是来查询这个字段的页面。

这里要一旦将page页面定义成tabBar组件页面，就不能使用类似wx.navigateTo、wx.redirectTo方法进行页面跳转。会提示找不到页面。错误提示如下：

2. 创建tabBar组件

在项目根目录创建组件

在微信开发者工具中可以右键文件夹后 >> 点击新建Component 工具会自动帮你建立组件。

• 配置index.json :

conponent 来声明这是一个组件
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

• 配置index.wxml

<cover-view class="page-index-bottom">
  <van-tabbar active="{{ tabbarActive }}" active-color="{{activeColor}}"  bind:change="switchTab">
    <van-tabbar-item icon="{{item.iconPath}}" wx:for="{{tabList}}" wx:key="index">
      {{item.tabText}}
    </van-tabbar-item>
  </van-tabbar>
</cover-view>

1. 在这里配置组件结构，通过<cover-view>标签来保证组件置于页面之上。

2. 这里采用列表渲染的方法生成tabBar的按钮块。

3. active-color 设置激活的样式

我这里是采用了vant的小程序组件来生成tabBar，也可采用官方的教程
微信官方文档-自定义tabBar

• 编辑index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    tabbarActive: 0,
    color: "#7A7E83",
    selectedColor: "rgb(238, 10, 36)",
    tabList: [
      {iconPath: 'home-o', selectedIconPath: '', pagePath: '/pages/index/index', tabText: '首页'},
      {iconPath: 'cart-o', selectedIconPath: '', pagePath: '/pages/menu/menu', tabText: '点餐'},
      {iconPath: 'balance-list-o', selectedIconPath: '', pagePath: '/pages/order/order', tabText: '订单'},
      {iconPath: 'user-o', selectedIconPath: '', pagePath: '/pages/user/user', tabText: '我的'}
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    switchTab (e) {
      const index = e.detail
      const url = this.data.tabList[index].pagePath
      // 点击点餐就另外跳转
      if (index === 1) {
        wx.navigateTo({
          url: '/pages/menu/menu',
        })
        return
      }
      wx.switchTab({
        url: url,
        success: () => {
          this.setData({
            tabbarActive: index
          })
        }
      })
    }
  }
})

switchTab方法通过e.detail获取激活的索引，通过索引获得路径数据。

这里我使用的是字体icon来显示tabBar的图标，所以只需要定义激活颜色，有需要的也可以换成图片。

由于我用的是vant组件 所以wxss里就没有写过css内容，这里就不展示了。

3. 点击后tab激活初始化的问题

如果在激活标签后发现激活的标签不是自己点击的

那是因为每个页面的tabBar组件都是一个单独存在的实例，在页面打开的时候就会初始化。

解决方法：
在导航跳转的页面方法里监听页面显示，并在显示的时候重新赋值当前激活页的索引

通过this.getTabBar()方法就可以获得当前的tabBar组件实例，通过修改tabbarActive数据来重新赋值。

如果导航跳转的是组件 ：

就使用组件的监听方法

以上就完成了一个自定义的tabBar组件 效果如下：

谢谢大家观看，如果错误，可在评论区指出，万分感谢~