Error: MiniProgramError {"errMsg":"setTabBarItem:fail custom Tabbar"} at Object.errorReport (WAServiceMainContext.js?t=wechat&s=1742434860958&v=3.7.11:1) at Function.thirdErrorReport (WAServiceMainContext.js?t=wechat&s=1742434860958&v=3.7.11:1) at Object.thirdErrorReport (WAServiceMainContext.js?t=wechat&s=1742434860958&v=3.7.11:1) at i (WASubContext.js?t=wechat&s=1742434860958&v=3.7.11:1) at Object.cb (WASubContext.js?t=wechat&s=1742434860958&v=3.7.11:1) at V._privEmit (WASubContext.js?t=wechat&s=1742434860958&v=3.7.11:1) at V.emit (WASubContext.js?t=wechat&s=1742434860958&v=3.7.11:1) at WASubContext.js?t=wechat&s=1742434860958&v=3.7.11:1 at n (WASubContext.js?t=wechat&s=1742434860958&v=3.7.11:1) at Fe (WASubContext.js?t=wechat&s=1742434860958&v=3.7.11:1)(env: Windows,mp,1.06.2412050; lib: 3.7.11)

### 微信小程序自定义 TabBar 的错误解决方案 在开发微信小程序的过程中，如果遇到 `setTabBarItem:fail not TabBar page` 报错，这通常是因为尝试在一个非 TabBar 页面上调用了 `wx.setTabBarItem` 方法。此方法仅适用于配置了 TabBar 的页面[^1]。 #### 问题分析 - **原因**: 小程序框架明确规定，`wx.setTabBarItem` 方法只能用于已配置为 TabBar 的页面上。如果试图在未被指定为 TabBar 的页面上调用该方法，则会触发上述错误。 - **解决思路**: 需要在实际的 TabBar 页面中调用相关接口，并通过其他方式实现动态更新功能。 --- #### 实现方案 ##### 使用全局函数管理 TabBar 状态 可以通过 App 对象创建一个通用的方法来处理 TabBar 的状态变更。以下是具体代码示例： ```javascript // app.js 中新增方法 App({ globalData: { tabBarSelectedIndex: 0, }, setCurrentTabbar(selected, that) { if (typeof that.getTabBar === 'function' && that.getTabBar()) { that.getTabBar().setData({ selected: selected, }); } }, }); ``` 在需要修改 TabBar 状态的地方调用这个方法即可[^2]。 --- ##### 处理页面切换时的状态同步 为了防止页面切换过程中出现延迟或者闪烁现象，在目标页面的 `onShow` 生命周期内手动设置 TabBar 的选中项。例如： ```javascript Page({ data: {}, onShow() { const index = 1; // 当前页面对应 TabBar 下标 if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: index, }); } }, }); ``` 注意：每个 TabBar 页面都需要单独设定其对应的索引值[^3]。 --- ##### 自定义 TabBar 组件 对于更复杂的场景，可以考虑完全替换默认的 TabBar 功能并采用自定义组件的方式完成需求。下面是一个简单的例子展示如何构建自定义 TabBar 并绑定点击事件： ###### 创建 CustomTabBar 文件夹结构 假设我们已经按照官方文档完成了基础布局设计[^4]。 ###### 编辑 WXML 结构 ```html <!-- custom-tab-bar/index.wxml --> <view class="tab-bar"> <block wx:for="{{list}}" wx:key="pagePath"> <view bindtap="switchTab" data-page-path="{{item.pagePath}}" style="{{selectedIndex === index ? 'color:red;' : ''}}"> {{item.text}} </view> </block> </view> ``` ###### 添加 JS 行为逻辑 ```javascript Component({ properties: { list: Array, selectedIndex: Number, }, methods: { switchTab(e) { const url = e.currentTarget.dataset.pagePath; wx.switchTab({url}); }, }, }); ``` 最后记得引入到各个需要用到它的页面当中去。 --- ### 总结 综上所述，“setTabBarItem:fail not TabBar page”的根本原因是 API 调用环境不符合规定所致；推荐利用小程序内置机制配合自定义策略共同解决问题。