评论

小程序这个可以做之自定义tabbar

画风一转,设计师歪嘴一笑:“能不能把它做掉?”,小李斜躺在公司配备的人体工学椅上,手拿MI 10 Pro,轻声道:“我可以试试,不过你知道的,得加钱!”,设计师满意的退下,他知道就没小李答应过没办成的

接受挑战

设计师终于对小程序的tabbar忍无可忍了,高度、字体...,

他找到了小李:“小李,我很担心啊,它影响了我们小程序的和谐,美感。它放在底部与我们格格不入,样式、字体、高度...。它割裂了我们与用户的交互,我们的弹层再高也会被它掩盖。”。

画风一转,设计师歪嘴一笑:“能不能把它做掉?”,

小李斜躺在公司配备的人体工学椅上,手拿MI 10 Pro,轻声道:“我可以试试,不过你知道的,得加钱!”,设计师满意的退下,他知道就没小李答应过没办成的事儿。

小李表面平淡,内心却是万匹草泥马经过,作为练习时长两年半的前端练习生,他熟读小程序文档,不就是为了今天吗,寒窗苦读一夜文,不为一朝有用时?微信tabbar宁有种乎?

自定义tabbar

根据微信自定义 tabBar的文档,简单的三步走加上一点点细节就能完成

  1. 配置信息
  • app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
  • 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。
  • 示例:
{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}
​
  1. 添加 tabBar 代码文件
  2. 在代码根目录下添加入口文件:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
  1. 编写 tabBar 代码
  2. 用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例。
  3. 转换为Taro3代码

大概长这样!

它掉了

很快项目就上了线,事情告一段落,小李又一次维护了小程序的美与和谐,再一次坚持了“这个可以做”的原则。直到产品的iOS 14发现自定义tababr会消失之后,所以爱会消失吗,一切都变了样。

小李开始慌了,找着一个又一个说辞,逛开发社区,看相关问题。总算是看到了官方回复:

自定义 tabBar 在切换 tab 时会使 tabBar 消失

setState,永远滴神!

小李很快按照官方回复:在显示 tab 页后,利用一次 setData 调用触发页面重渲染,让 tabBar 重新显示。

另辟蹊径

小李觉得这件事情非常hack,无端调用setData。他仿佛掉入了锚定效应的坑,按照微信自定义tabbar文档来自定义tabbar,按照微信说的setState来解决tabbar消失。

按照微信的文档:

custom-tab-bar目录下的组件将被放到tab页面。

等等,放到tab页面?

为啥我不可以自己放?

思想挣开了锚,此刻小李可以自由的在大海遨游。

将自定义tabbar 当作普通组件主动挂载到几个tab页面,将空组件放到custom-tab-bar目录下,no setState,no hack!

最后一次编辑于  2021-04-13  
点赞 1
收藏
评论

4 个评论

  • PK发型不乱
    PK发型不乱
    2022-01-19

    以上都是人才

    2022-01-19
    赞同
    回复
  • 凌晨丶傍晚
    凌晨丶傍晚
    2021-09-27

    那tabbar能放四个跟首页无关的单独页面,还不会默认选中吗?

    2021-09-27
    赞同
    回复
  • ??
    ??
    2021-06-06

    请问底部导航会抖动吗?能适iPhone x吗?有代码可以研究下吗

    2021-06-06
    赞同
    回复
  • admin
    admin
    2021-04-13

    不明觉厉

    2021-04-13
    赞同
    回复
登录 后发表内容