小程序 tabbar

Posted 2023-02-26

参考技术A

app.json 直接配置:

官方文档： 自定义 tabBar

custom-tab-bar/index

在小程序根目录下新建 custom-tab-bar 文件夹，文件夹下建立相应的组件。

wxml 文件：

推荐使用 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。不过现在使用 view 也可以，之前是因为使用 map 组件可能会导致无法覆盖，现在 map 组件已经支持同层渲染，所以使用 view 也是没问题的。

js 文件：

tabbar 的配置主要在这里。

因为每个 tab 页下的自定义 tabBar 组件实例是不同的，在跳转新的tab 后，是一个新的 tabbar 实例，先前那个已经被销毁了，所以要重新设置。

在每个自定义的 tab 页面 onShow 方法中，

可见使用系统提供自定义 tabbar 方式不好的地方在于每个 tabbar 页面都要手动设置一遍选中状态。

为什么说是系统自定义的？

因为我们自定义的组件 custom-tab-bar/index 并没有在每个页面的 json 中进行单独配置进行组件的引用，都是系统默认配置好的。

官方文档 Tabbar 。

通过 useExtendedLib 扩展库 的方式引入 weui 组件库。

app.json 配置：

在 tab 页面的 page.json 中引入 tabbar 组件即可：

wxml 使用：

直接将第二种方式 使用系统自定义的方式 custom-tab-bar/index 文件夹及文件移动到 components 自定义组件文件夹中 ，并将 app.json 中的 tabbar 配置删除即可。

在相应的 tab 页面引入自定义 tabbar 组件即可。

屏幕有效区域高度 windowsHeight，需要手动维护，系统不再维护。使用系统的 tabbar，屏幕的有效区域高度 windowsHeight = 屏幕高-状态栏高度-导航条高度-tabbar高度 ；而自定义的 tabbar 则没有计算 tabbar 高度，即 windowsHeight = 屏幕高-状态栏高度-导航条高度 。