百度智能小程序 標(biāo)簽欄

標(biāo)簽欄

欄目選項(xiàng)條能讓用戶方便地在不同模塊視圖間瀏覽切換。

1. 欄目選項(xiàng)條可以放在頁(yè)面頂部，也可以放在頁(yè)面中部；
2. 切換查看不同欄目下的內(nèi)容通過(guò)點(diǎn)擊完成，如需輔以左右滑動(dòng)手勢(shì)，需配合“swiper”組件實(shí)現(xiàn)；

開(kāi)發(fā)文檔說(shuō)明詳見(jiàn) tabs 標(biāo)簽欄。

基礎(chǔ)庫(kù) v3.100.23 及以上版本的智能小程序，支持欄目選項(xiàng)條組件。

1.選項(xiàng)條在頁(yè)面頂部 2.選項(xiàng)條在頁(yè)面中部

元素解構(gòu)

1.容器 2.欄目選項(xiàng)

容器

欄目選項(xiàng)條容器用于放置欄目選項(xiàng)，并根據(jù)容器寬度和設(shè)置的最大顯示數(shù)量均分展現(xiàn)，容器內(nèi)設(shè)置 2-5 個(gè)選項(xiàng)為宜，每個(gè)選項(xiàng)對(duì)應(yīng)展現(xiàn)其相應(yīng)的分類內(nèi)容。

如需在欄目選項(xiàng)條右側(cè)增加其他功能入口，可以通過(guò)自定義容器的整體寬度，為入口預(yù)留展示空間。入口數(shù)量不多于 2 個(gè)為宜。

欄目選項(xiàng)

欄目選項(xiàng)根據(jù)用戶行為分為三個(gè)階段狀態(tài)：非選中態(tài)、點(diǎn)擊態(tài)和選中態(tài)（自帶下劃線）。其中點(diǎn)擊態(tài)由小程序統(tǒng)一處理，其他由開(kāi)發(fā)者自行定義。

1.選項(xiàng)名稱2.選中態(tài)下劃線

選項(xiàng)名稱應(yīng)簡(jiǎn)潔易懂，長(zhǎng)度不大于 4 個(gè)漢字為宜。

交互行為

點(diǎn)擊欄目選項(xiàng)時(shí)，模塊視圖可以切換至與其關(guān)聯(lián)內(nèi)容。點(diǎn)擊當(dāng)模塊所在選項(xiàng)，則無(wú)反應(yīng)。如需輔以左右滑動(dòng)手勢(shì)，需配合“swiper”組件實(shí)現(xiàn)，開(kāi)發(fā)文檔說(shuō)明詳見(jiàn)swiper-item 滑塊視圖容器子項(xiàng)。你的瀏覽器不支持該視頻播放

溫馨提示：如果你的瀏覽器無(wú)法正常播放，請(qǐng)嘗試Chrome瀏覽器。

個(gè)性定制

默認(rèn)樣式

開(kāi)發(fā)者可自定義選項(xiàng)名稱和下劃線顏色，請(qǐng)注意明確區(qū)分其選中態(tài)和非選中態(tài)樣式，方便用戶定位當(dāng)前所在位置。

自定義樣式

定義選項(xiàng)欄樣式時(shí)，請(qǐng)務(wù)必關(guān)注并保證可讀性和可用性。用合適的顏色區(qū)分選項(xiàng)的選中態(tài)和非選中態(tài)，并且為容器設(shè)計(jì)適當(dāng)?shù)谋尘吧杀ＷC內(nèi)容顯示清晰。