小程序中tabBar的使用心得 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

小程序中tabBar的使用心得

发表时间:2021-4-6

发布人:葵宇科技

浏览次数:73

今天说说tabBar的使用,先看看官方说法:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面


备注:

  1. 当设置 position 为 top 时,将不会显示 icon

  2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。



今天在做投一个小程序时,也用到了tabBar,先看一下示例:

为什么没有自己实现tabBar?因为自己实现的tabBar,没有官方的常驻底部的效果好,官方的组件也有限制:不能完全满足自定义需求。比如不支持iconfont图标,也不能展示其他样式风格。


不废话,来看代码吧,代码需要在app.json中进行配置,如下:


参数说明:

colortab 上的文字默认颜色

selectedColor: tab 上的文字选中时的颜色

backgroundColortab 的背景色

borderStyletabbar上边框的颜色, 仅支持 black/white

position可选值 bottom、top

注:color颜色请一定写成十六进制颜色,不要用RGB颜色,IOS设备上不识别RGB颜色~


可能会踏的坑:

其他页面,如果需要跳转至带tabBar的页面,必须使用wx.swichTab(),使用wx.navigateTo()和wx.redirectTo()都无效~

相关案例查看更多