关于微信小程序自定义TabBar问题的详析

背景

在微信小程序开发中，开发者可以使用系统提供的 tabBar 组件来构建主界面底部的 tabbar。而对于一些特殊的业务需要，开发者可能需要自定义小程序的 tabBar，以增强小程序的表现力和用户体验。然而，自定义 tabBar 在实现上具有一定的技术难度，很容易引起一些常见的问题。本文将围绕自定义 tabBar 在实现中遇到的问题进行详细的讲解和分析。

正文

自定义tabBar 实现思路

实现一个自定义 tabBar 需要考虑以下几点：

自定义 tabBar 的样式可以是类似系统提供的 tabBar 样式，也可以是全新的样式。
需要自己实现页面的跳转逻辑，并处理页面切换的回退和前进。
自定义 tabBar 需要考虑小程序生命周期的影响，如页面栈、全局变量和数据的存储等。

基于以上思考，自定义 tabBar 的实现方式主要有以下两种：

在 App.js 中监听 onTabItemTap 事件，并在事件回调中进行页面跳转处理。
在自定义组件中实现 tabBar，并对 tabBar 中的各个 icon 设置页面跳转事件。

下面分别详细介绍这两种方式的实现步骤及其注意事项。

方案1：在 App.js 中监听 onTabItemTap 事件

该方案的实现步骤如下：

在 App.js 中定义需要展示的 tabBar 图标和页面路径。

App({
  globalData: {
    tabBar: [
      {
        "iconPath": "/images/tab/icon-home.png",
        "selectedIconPath": "/images/tab/icon-home-active.png",
        "pagePath": "/pages/tabbar/home/index"
      },
      {
        "iconPath": "/images/tab/icon-mine.png",
        "selectedIconPath": "/images/tab/icon-mine-active.png",
        "pagePath": "/pages/tabbar/mine/index"
      }
    ]
  },
  onLaunch: function () {}
})

在 globalData 中定义了两个 tab，分别对应 tabBar 中的两个 icon 图标和页面路径，实际项目中可以根据需求调整。

监听 onTabItemTap 事件，在事件回调中进行页面路径跳转。

App({
  globalData: {
    tabBar: [
      {
        "iconPath": "/images/tab/icon-home.png",
        "selectedIconPath": "/images/tab/icon-home-active.png",
        "pagePath": "/pages/tabbar/home/index"
      },
      {
        "iconPath": "/images/tab/icon-mine.png",
        "selectedIconPath": "/images/tab/icon-mine-active.png",
        "pagePath": "/pages/tabbar/mine/index"
      }
    ]
  },
  onLaunch: function () {},
  onTabItemTap: function (item) {
    var tabBar = this.globalData.tabBar
    var index = item.index
    var path = tabBar[index].pagePath
    wx.switchTab({
      url: path,
      success: function () {
        console.log("跳转" + path + "页面成功")
      },
      fail: function () {
        console.log("跳转" + path + "页面失败")
      }
    })
  }
})

在 onTabItemTap 事件中，获取需要跳转的页面路径，并使用 wx.switchTab 命令进行页面跳转。成功跳转后会打印日志信息，方便调试。

需要注意的是，WXML 中自定义的 tabBar 组件需要使用 open-type="switchTab" 指定为 switchTab 类型，否则在某些情况下页面跳转会失败。

方案2：自定义tabBar组件

该方案的实现步骤如下：

在自定义组件中实现 tabBar 组件的样式和布局。

<view class="tab-bar">
  <view class="tab-item {{currentTab === 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0">
    <image class="tab-icon" src="/images/tab/icon-home.png"></image>
    <text class="tab-text">首页</text>
  </view>
  <view class="tab-item {{currentTab === 1 ? 'active' : ''}}" bindtap="switchTab" data-index="1">
    <image class="tab-icon" src="/images/tab/icon-mine.png"></image>
    <text class="tab-text">我的</text>
  </view>
</view>

以上代码中，我们在 tabBar 布局中使用了两个 tab-item 样式，分别对应两个 tab，具体的样式可以根据需求自行调整。

定义 switchTab 函数处理页面跳转逻辑。

Component({
  data: {
    currentTab: 0
  },
  methods: {
    switchTab: function (e) {
      var index = parseInt(e.currentTarget.dataset.index)
      var pages = getCurrentPages()
      var lastPage = pages[pages.length - 1]
      var pagePath = lastPage.route

      if (index === this.data.currentTab) {
        return false
      }

      this.setData({
        currentTab: index
      })

      wx.redirectTo({
        url: '/' + this.data.tabBar[index].pagePath,
        success: function () {
          console.log("跳转" + path + "页面成功")
        },
        fail: function () {
          console.log("跳转" + path + "页面失败")
        }
      })
    }
  }
})

以上代码中，我们在 switchTab 函数中获取了当前点击的 index 和当前页面的路由，判断当前 index 是否已经是当前页面的 index，如果是，返回。否则，切换到对应的 index 页面，并更新 currentTab 数据。

在页面模板中引用自定义的 tabBar 组件。

<view>
  <navigator url="/pages/tabbar/home/index">
    <text>去首页</text>
  </navigator>
  <navigator url="/pages/tabbar/mine/index">
    <text>去我的</text>
  </navigator>
  <custom-tab-bar></custom-tab-bar>
</view>

在以上代码中，我们在 navigator 标签上添加了页面跳转的链接，并在最后添加了自定义的 tabBar 组件。

需要注意的是，自定义的 tabBar 组件需要在 app.json 文件中进行配置。具体如下：

{
  "tabBar": {
    "custom": true,
    "list": [],
    "color": "#9E9E9E",
    "selectedColor": "#FF5252",
    "backgroundColor": "#FDFDFD"
  }
}

在 tabBar 的配置项中，将 custom 属性设置为 true，表示采用自定义 tabBar，list 属性留空，其他的属性配置可以按照需求进行调整。

示例说明

以下是自定义 tabBar 组件的示例代码，以便更好地理解和实践。

示例1：TabBar 中添加图标和文字

<view class="tab-bar">
  <view class="tab-item {{currentTab === 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0">
    <image class="tab-icon" src="/images/tab/home.png"></image>
    <text class="tab-text">首页</text>
  </view>
  <view class="tab-item {{currentTab === 1 ? 'active' : ''}}" bindtap="switchTab" data-index="1">
    <image class="tab-icon" src="/images/tab/find.png"></image>
    <text class="tab-text">发现</text>
  </view>
  <view class="tab-item {{currentTab === 2 ? 'active' : ''}}" bindtap="switchTab" data-index="2">
    <image class="tab-icon" src="/images/tab/mine.png"></image>
    <text class="tab-text">我的</text>
  </view>
</view>

在该示例中，我们在 tab-item 中分别添加图片和文字，以展示具有较好的页面效果。

示例2：TabBar 中添加未读消息数目

<view class="tab-bar">
  <view class="tab-item {{currentTab === 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0">
    <image class="tab-icon" src="/images/tab/home.png"></image>
    <text class="tab-text">首页</text>
  </view>
  <view class="tab-item {{currentTab === 1 ? 'active' : ''}} relative" bindtap="switchTab" data-index="1">
    <image class="tab-icon" src="/images/tab/message.png"></image>
    <text class="tab-text">消息</text>
    <view class="unread" wx:if="{{unreadCount}}">
      {{unreadCount}}
    </view>
  </view>
  <view class="tab-item {{currentTab === 2 ? 'active' : ''}}" bindtap="switchTab" data-index="2">
    <image class="tab-icon" src="/images/tab/mine.png"></image>
    <text class="tab-text">我的</text>
  </view>
</view>

在该示例中，我们在消息 icon 的右上角添加小红点，用于展示未读消息的数量。具体实现是在 tab-item 的 view 布局中添加了一个 unread 样式，用于展示未读消息数目。如果没有未读消息，则不展示 unread 样式。

结论

自定义 tabBar 主要有以上两种实现方式，其中第一种方式比较容易实现，相对较为简单；而第二种方式效果较佳，可以随意定制样式和布局，但需要在实现过程中考虑更多问题。在实际项目中，开发者可以根据实际需求选择适合自己的方式进行开发。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：关于微信小程序自定义tabbar问题详析 - Python技术站

关于微信小程序自定义tabbar问题详析