小程序开发设计如何实现跨平台开发与管理满足企业多元化需求
243
2024-07-02
自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。
在自定义 tabBar 模式下:
为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配置项需完整声明,但这些字段不会作用于自定义 tabBar 的渲染。
此时需要开发者提供一个自定义组件来渲染 tabBar,所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的cover-view
+cover-image
组件渲染样式,以保证 tabBar 层级相对较高。
与 tabBar 样式相关的接口,如ft.setTabBarItem
等将失效。
每个 tab 页下的自定义 tabBar 组件实例是不同的,可通过自定义组件下的getTabBar
接口,获取当前页面的自定义 tabBar 组件实例。
请注意
如需实现 tab 选中态,要在当前页面下,通过getTabBar
接口获取组件实例,并调用setData
更新选中态。可参考底部的代码示例。
在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": {}} 已复制代码
在代码根目录下添加入口文件:
custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.fxml custom-tab-bar/index.ftss 已复制代码
用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增getTabBar
接口,可获取当前页面下的自定义 tabBar 组件实例。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~