小程序模板網(wǎng)

小程序中tabBar的使用心得

發(fā)布時(shí)間:2018-04-25 10:53 所屬欄目:小程序開發(fā)教程

今天說說tabBar的使用,先看看官方說法:如果小程序是一個(gè)多 tab 應(yīng)用(客戶端窗口的底部或頂部有 tab 欄可以切換頁面),可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn),以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁面。

 

 

備注:

  1. 當(dāng)設(shè)置 position 為 top 時(shí),將不會(huì)顯示 icon

  2. tabBar 中的 list 是一個(gè)數(shù)組,只能配置最少2個(gè)、最多5個(gè) tab,tab 按數(shù)組的順序排序。

     

 

 

今天在做投一個(gè)小程序時(shí),也用到了tabBar,先看一下示例:

 

為什么沒有自己實(shí)現(xiàn)tabBar?因?yàn)樽约簩?shí)現(xiàn)的tabBar,沒有官方的常駐底部的效果好,官方的組件也有限制:不能完全滿足自定義需求。比如不支持iconfont圖標(biāo),也不能展示其他樣式風(fēng)格。

 

不廢話,來看代碼吧,代碼需要在app.json中進(jìn)行配置,如下:

 

參數(shù)說明:

color:tab 上的文字默認(rèn)顏色

selectedColor: tab 上的文字選中時(shí)的顏色

backgroundColor:tab 的背景色

borderStyle:tabbar上邊框的顏色, 僅支持 black/white

position:可選值 bottom、top

注:color顏色請一定寫成十六進(jìn)制顏色,不要用RGB顏色,IOS設(shè)備上不識(shí)別RGB顏色~

 

可能會(huì)踏的坑:

其他頁面,如果需要跳轉(zhuǎn)至帶tabBar的頁面,必須使用wx.swichTab(),使用wx.navigateTo()和wx.redirectTo()都無效~



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24052.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢