微信小程序自定义 tabBar 踩坑实践

我使用 作为 组件库,下面以此组件库为例。创建自定义 文件

创建一个与 / 的同级目录,命名为 /--,注意目录层级与目录命名问题,不可用其他名称命名。

在 /-- 下创建四个文件:.

在 . 中我们定义相关数据:

以及一个切换 时触发的方法:.

在 . 中,将 参数值设为 ,代表这是一个自定义组件:

因为我使用了 的 标签栏 ,所以还需引入额外组件:.

在 . 中定义组件形态,我在此处使用 的 标签栏,详见代码,不再赘述。配置 .

在 . 中配置如下参数:实现 选中态

根据微信官方文档描述,每个 页面 的实例是不同的:

每个 页下的自定义 组件实例是不同的,可通过自定义组件下的 接口,获取当前页面的自定义 组件实例。

显而易见,每当切换 页时,我们都需要更新 的选中态。关于选中态的实现,官方文档描述如下:

注意:如需实现 选中态,要在当前页面下,通过 接口获取组件实例,并调用 更新选中态。

我们可以在使用到 的页面中这样实现:

至此,一个自定义 的实现已全部完成。() 方法缺失

在实现 选中态时遇到 方法缺失的问题。在小程序工具中跳转到 方法的定义,我们可以看到:

该方法的最低基础版本库为 2.6.2,我们修改 .. 文件中的 字段,升级到指定版本库即可。升级版本库后 组件报错

报错内容如下:

原因是由于 组件目录放置错误导致的,需要注意以下几点:() 始终返回

依旧是目录放置与文件命名问题,处理方法同上。

另外,不需要在 . 的 引入 组件,如果你放置目录与命名正确,小程序会自动引入。参考资料

[1]

小程序官方文档:自定义 :

[2]

官方自定义 的显示和隐藏:

[3]

无法调用 接口相关说明在哪里?:

© 版权声明
THE END
分享