轻松玩转微信小程序自定义tabBar

自定义微信小程序 TabBar：让你的小程序更加个性化

一、准备工作

打造一个令人惊叹的微信小程序需要关注每一个细节，包括用户界面设计。TabBar 是小程序与用户交互的重要入口，也是提升小程序品牌形象的绝佳方式。通过自定义 TabBar，你可以让你的小程序脱颖而出，提供更具吸引力的用户体验。

二、自定义 TabBar 的步骤

自定义 TabBar 并不复杂，只需遵循以下步骤：

1. 准备 TabBar 配置文件： 在小程序项目中创建一个名为 tabBar.json 的文件，并添加必要的配置。
2. 设置自定义 TabBar： 在 app.js 文件中调用 wx.setTabBar 函数，将准备好的 tabBar.json 配置应用到你的小程序中。

三、实现 99+ 小红心效果

除了自定义 TabBar 的外观，你还可以添加一些酷炫的效果，例如显示 99+ 的小红心。这可以有效吸引用户关注，提高小程序的参与度。

要实现 99+ 小红心效果，你需要：

1. 设置小红心数量： 在页面 .js 文件中，使用 setData 函数设置小红心数量。
2. 更新缓存： 使用 wx.setStorageSync 函数将小红心数量更新到缓存中。

四、示例代码

以下是一段展示如何自定义 TabBar 和实现 99+ 小红心效果的示例代码：

// tabBar.json
{
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/tabbar/home.png",
      "selectedIconPath": "images/tabbar/home_active.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "images/tabbar/cart.png",
      "selectedIconPath": "images/tabbar/cart_active.png"
    },
    {
      "pagePath": "pages/user/user",
      "text": "我的",
      "iconPath": "images/tabbar/user.png",
      "selectedIconPath": "images/tabbar/user_active.png"
    }
  ]
}

// app.js
App({
  onLaunch() {
    const tabBarConfig = require('./tabBar.json');
    wx.setTabBar(tabBarConfig);
  }
})

// index.js
Page({
  data: {
    redDot: 0
  },
  onLoad() {
    const redDot = wx.getStorageSync('redDot');
    if (redDot) {
      this.setData({ redDot })
    }
  },
  updateRedDot(newRedDot) {
    this.setData({ redDot: newRedDot })
    wx.setStorageSync('redDot', newRedDot);
  }
})

五、常见问题解答

1. 如何隐藏 TabBar？
答：使用 wx.hideTabBar 函数。

2. 如何设置 TabBar 背景颜色？
答：在 app.json 文件的 tabBar 对象中设置 backgroundColor 属性。

3. 如何设置 TabBar 选中项？
答：使用 wx.switchTab 函数，传入 tab 参数。

4. 如何添加小红点？
答：在 TabBar 配置文件中，为目标选项卡设置 redDot 属性。

5. 如何监听 TabBar 点击事件？
答：在 app.js 文件中，监听 tabBarTap 事件。