小程序中自定义tabbar的基本逻辑和三种实现思路
发布于 2 年前 作者 yan43 4722 次浏览 来自 分享

重要提示

小程序中的tabbar默认可以在app.json中配置,参见全局配置 | 微信开放文档,请优先考虑使用官方配置,在使用上更简洁优雅。同时小程序也提供了自定义tabbar的方法,参见自定义 tabBar | 微信开放文档

三种实现思路

按简易程度排序。

1. 官方约定的自定义组件

已基本优化图标闪烁问题,官方正在修复中,见

参照官方的教程步骤如下:

  1. app.json中声明tabBar中的custom: true,隐藏默认的tabBar,并补充完整的tab页面路径。
  2. 按照约定,在根目录创建custom-tab-bar/index.js等作为自定义展示的tabBar
  3. 然后在app.json中添加usingComponents或在对应的tab页面(可以是组件或页面)中添加usingComponents项(仅需key即可),微信会自动把该组件注册到对应的tab页面中。
  4. 观察官方示例可以发现:在custom-tab-bar/index中通过cover-view + cover-image + fixed+padding-bottom: env(safe-area-inset-bottom) 让对应的tab显示在页面的最下方,并处理了安全边距的问题,
  5. 点击不同的菜单时,首先会在组件内部触发跳转路由操作,使用wx.switchTab, 因为对应路径已经在app.json中已声明为tab页面。
  6. 官方示例在tab组件的onShow中更新selected状态(通过this.getTabBar()获取自定义tabBar实例),同时在该tabBar的点击回调中更新selected,会出现闪烁问题,'该tabBar的点击回调中更新selected' 注释掉会优化闪烁问题。

代码示例

2. 一半约定,一般自定义组件的方式

  1. app.json中声明tabBar中的custom: true,隐藏默认的tabBar,并补充完整的tab页面路径。
  2. 在components中创建自定义tabBar组件,在tab页面注册该组件并传递当前页面的selected值,点击时按配置的path进行switchTab路由切换

本质1类似,但没有使用约定的目录和命名,并没有使用getTabBar,通过组件属性的方式实现菜单的激活选择

初次仍存在闪烁问题

3. 在一个页面模拟多个页面,类似SPA的标签切换控制不同组件的方式

大部分的UI库都是类似的方式,即tabBar仅仅是一个独立组件,具体显示由开发者控制

组件具体实现及使用参见TDesignVant Weapp - 轻量、可靠的小程序 UI 组件库,也可结合上述1、2使用。

1 回复

不谈技术,自定义tabbar属于锦上添花,首先得是锦,添花才有意义

回到顶部