接受挑战
设计师终于对小程序的tabbar忍无可忍了,高度、字体...,
他找到了小李:“小李,我很担心啊,它影响了我们小程序的和谐,美感。它放在底部与我们格格不入,样式、字体、高度...。它割裂了我们与用户的交互,我们的弹层再高也会被它掩盖。”。
画风一转,设计师歪嘴一笑:“能不能把它做掉?”,
小李斜躺在公司配备的人体工学椅上,手拿MI 10 Pro,轻声道:“我可以试试,不过你知道的,得加钱!”,设计师满意的退下,他知道就没小李答应过没办成的事儿。
小李表面平淡,内心却是万匹草泥马经过,作为练习时长两年半的前端练习生,他熟读小程序文档,不就是为了今天吗,寒窗苦读一夜文,不为一朝有用时?微信tabbar宁有种乎?
自定义tabbar
根据微信自定义 tabBar的文档,简单的三步走加上一点点细节就能完成
- 配置信息
- 在
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": {}
}
- 添加 tabBar 代码文件
- 在代码根目录下添加入口文件:
custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-bar/index.wxss
- 编写 tabBar 代码
- 用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增
getTabBar
接口,可获取当前页面下的自定义 tabBar 组件实例。 - 转换为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!
以上都是人才
那tabbar能放四个跟首页无关的单独页面,还不会默认选中吗?
请问底部导航会抖动吗?能适iPhone x吗?有代码可以研究下吗
不明觉厉