苏南大叔来继续说明百度智能小程序,底部tabbar的使用方法。这个tabbar表面上看起来很简单,但事实上,如果用纯正的html的观点来看待的话,就会陷入莫名其妙的坑中。对于这个tabbar的理解上,要抽离出传统思维了。

苏南大叔:百度智能小程序,如何设置底部tabbar? - smartapp-tabbar-png
百度智能小程序,如何设置底部tabbar?(图3-1)

本文测试环境:mac百度开发者工具@2.4.0

概述

百度智能小程序的底部tabbar,是一个系统级别的组件。并不是像html一样,要写htmlcss之类的,最后再position:fix这样的。官方有两个页面讲述这个tabbar,分别是:

js角度讲述tabbar

ui角度,讲述tabbar

可以通过查看预览效果,查看本文中的例子。

  • swanide://fragment/482e7c6c58d4a14339abc8fda24074c11557728348921

注意事项

这个例子的参数,就不详细说了,看名字就可以知道具体的意思。这里苏南大叔想要说的注意事项是:

  • pagePath必须正常存在,并且在app.jsonpageList里面进行了注册。
  • 当前的path,在tabbar中有定义的时候,当前页面才会显示tabbar。也就是说,只有tabbar定义过的页面,才能展示tabbartabbar并不是时时刻刻都显示的。
  • tabbar的页面不存在,这个是致命错误,图片不存在,没有太大问题。

也就是说默认首页,需要被设置到tabbar里面,否则永远看不到tabbar。在页面跳转的时候,可能会存在把 tabbar跳丢了的情况,需要仔细测试鉴别。这就是上文中,苏南大叔强调最好对于navigator,最好新建窗口的原因。

苏南大叔:百度智能小程序,如何设置底部tabbar? - tabbar_ui
百度智能小程序,如何设置底部tabbar?(图3-3)

官方这里有个相关链接:

总结

本文中,苏南大叔从ui表现层方面说了tabbar的具体用法和注意事项。但是,并没有涉及到其中图标上的红色角标的问题,这些问题是使用js手段来处理的。那么,相关的设置方法,将会在苏南大叔的后续文字中,进行讲述。更多精彩文章,请点击下面的这个链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   百度    smartapp

本站的忠实读者小伙伴,正在阅读下面这些文章: