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

2020-08-28 15:44 更新

tabs 標(biāo)簽欄

解釋:標(biāo)簽欄,用于讓用戶在不同的視圖中進(jìn)行切換。標(biāo)簽欄組件的使用需要通過 tabs 和 tab-item 組件配合實(shí)現(xiàn)?;A(chǔ)庫 3.100.4 版本開始支持。設(shè)計(jì)文檔詳見 標(biāo)簽欄

建議開發(fā)者盡量使用可尋址標(biāo)簽欄組件實(shí)現(xiàn)頁面主標(biāo)簽欄功能??蓪ぶ窐?biāo)簽欄組件在標(biāo)簽欄 tab 切換時(shí),該頁面的 uri 參數(shù)會(huì)同步變化;反之,跳轉(zhuǎn)某頁面 uri 時(shí),指定標(biāo)簽欄綁定的參數(shù)值也會(huì)打開該值對(duì)應(yīng)的 tab 頁。由于這種綁定關(guān)系的存在,相比于普通標(biāo)簽欄,可尋址標(biāo)簽欄欄更利于搜索引擎收錄。例如:主頁的多頻道切換。

屬性說明

屬性名 類型 默認(rèn)值 必填 說明 最低版本
tabs-background-color String ‘#fff’ tabs 背景色,必須填寫十六進(jìn)制顏色 3.100.4
低版本請(qǐng)做兼容性處理
tabs-active-text-color String ‘#000’ tabs 激活 tab-item 文字顏色 3.100.4
低版本請(qǐng)做兼容性處理
tabs-inactive-text-color String ‘#666’ tabs 非激活 tab-item 文字顏色 3.100.4
低版本請(qǐng)做兼容性處理
tabs-underline-color String ‘#333’ tabs 激活 tab-item 下劃線顏色 3.100.4
低版本請(qǐng)做兼容性處理
active-name String 僅用于普通標(biāo)簽欄組件,當(dāng)前激活 tab-item 的對(duì)應(yīng)的 name 值,須搭配 bindtabchange 一起使用。 3.100.4
低版本請(qǐng)做兼容性處理
url-query-name String 僅用于可尋址標(biāo)簽欄組件,當(dāng)前 tab 所改變的 url query 中參數(shù) key,需要通過 tabs 修改頁面 url 的時(shí)候設(shè)置。 3.100.4
低版本請(qǐng)做兼容性處理
max-tab-item-amount Number 5 當(dāng)前 tabs 視圖中最多容納的 tab-item 數(shù)量,低于此數(shù)量均分排列,超出此數(shù)量劃屏。默認(rèn)五個(gè),開發(fā)者可根據(jù)業(yè)務(wù)需求調(diào)整 3.100.4
低版本請(qǐng)做兼容性處理
bindtabchange EventHandle tab 被點(diǎn)擊的回調(diào),可以在 e.detail.name 中取到當(dāng)前點(diǎn)擊的 tab-item 對(duì)應(yīng)的 name 值 3.100.4
低版本請(qǐng)做兼容性處理

示例 

在開發(fā)者工具中打開


代碼示例 1 :默認(rèn)樣式

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">默認(rèn)樣式</view>
        <tabs 
            class="border-bottom"
            active-name="{{activeNameOne}}"
            bindtabchange="tabsOne">
            <tab-item s-for="tab in tabs" name="{{tab.name}}" label="{{tab.label}}" />
        </tabs>
        <view class="intro">
            <view>標(biāo)簽{{content}}內(nèi)容展示區(qū)</view>
        </view>
    </view>
</view>
Page({
    data: {
        tabs: [{
            name: '一',
            label: '標(biāo)簽一'
        }, {
            name: '二',
            label: '標(biāo)簽二'
        }, {
            name: '三',
            label: '標(biāo)簽三'
        }],
        content: '一',
        activeNameOne: '一'
    },
    tabsOne(e) {
        this.setData({
            content: e.detail.name,
            activeNameOne: e.detail.name
        })
    }
});

設(shè)計(jì)指南

普通標(biāo)簽欄中子項(xiàng)(tab-item)的數(shù)量 2-5 個(gè)為宜。內(nèi)容文字(label)應(yīng)簡潔易懂,長度不大于 4 個(gè)漢字為宜。

錯(cuò)誤

只有1個(gè)子項(xiàng)時(shí)請(qǐng)不要使用 tabs。

錯(cuò)誤

內(nèi)容過長出現(xiàn)折行不美觀,影響閱讀體驗(yàn)。


代碼示例 2 :可橫滑展示

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>可橫滑顯示</view>
            <view>max-tab-item-amount="5"</view>
        </view>
        <tabs 
            class="border-bottom" 
            active-name="{{activeNameTwo}}"
            max-tab-item-amount="5"
            bindtabchange="tabsTwo">
            <tab-item s-for="tab in tabsTwo" name="{{tab.name}}" label="{{tab.label}}" />
        </tabs>
        <view class="intro">
            <view>標(biāo)簽{{contentTwo}}內(nèi)容展示區(qū)</view>
        </view>
    </view>
</view>
Page({
    data: {
        tabsTwo: [{
            name: '一',
            label: '標(biāo)簽一'
        }, {
            name: '二',
            label: '標(biāo)簽二'
        }, {
            name: '三',
            label: '標(biāo)簽三'
        }, {
            name: '四',
            label: '標(biāo)簽四'
        }, {
            name: '五',
            label: '標(biāo)簽五'
        }, {
            name: '六',
            label: '標(biāo)簽六'
        }, {
            name: '七',
            label: '標(biāo)簽七'
        }],
        contentTwo: '一',
        activeNameTwo: '一'
    },
    tabsTwo(e) {
        this.setData({
            contentTwo: e.detail.name,
            activeNameTwo: e.detail.name
        })
    }
});

代碼示例 3 :自定義樣式

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定義樣式</view>
        </view>
        <tabs 
            class="border-bottom"
            tabs-background-color="#3388ff"
            tabs-underline-color="#fff"
            tabs-inactive-text-color="#fff"
            tabs-active-text-color="#fff"
            bindtabchange="tabsThree"
            active-name="{{activeNameThree}}">
            <tab-item s-for="tab in tabsThree" name="{{tab.name}}" label="{{tab.label}}" />
        </tabs>
        <view class="intro">
            <view>標(biāo)簽{{contentThree}}內(nèi)容展示區(qū)</view>
        </view>
    </view>
</view>
Page({
    data: {
        tabsThree: [{
            name: '一',
            label: '標(biāo)簽一',
        }, {
            name: '二',
            label: '標(biāo)簽二',
        }, {
            name: '三',
            label: '標(biāo)簽三'
        }],
        contentThree: '一',
        activeNameThree: '一'
    },
    tabsThree(e) {
        this.setData({
            contentThree: e.detail.name,
            activeNameThree: e.detail.name
        })
    }
});

自定義樣式時(shí)需使用合適的顏色明確區(qū)分子項(xiàng)(tab-item)的選中態(tài)和非選中態(tài),并且為標(biāo)簽欄設(shè)計(jì)適當(dāng)?shù)谋尘吧╰abs-background-color),保證其內(nèi)容顯示清晰。

錯(cuò)誤

選中態(tài)和非選中態(tài)的內(nèi)容顏色無區(qū)分或顏色過多,均會(huì)影響閱讀效率。

錯(cuò)誤

背景與內(nèi)容 的配色不協(xié)調(diào),過多使用高飽和度或顏色過于相近,均會(huì)降低閱讀舒適度。

代碼示例 4 :顯示徽標(biāo)

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>顯示徽標(biāo)</view>
        </view>
        <tabs 
            class="border-bottom" 
            bindtabchange="tabsFour"
            active-name="{{activeNameFour}}">
            <tab-item 
                s-for="tab in tabsFour" 
                badge-type="{{tab.badgeType}}" 
                badge-text="{{tab.badgeText}}"
                name="{{tab.name}}" 
                label="{{tab.label}}" />
        </tabs>
        <view class="intro">
            <view>標(biāo)簽{{contentFour}}內(nèi)容展示區(qū)</view>
        </view> 
    </view> 
</view>
Page({
    data: {
        tabsFour: [{
            name: '一',
            label: '標(biāo)簽一',
            badgeType: 'text',
            badgeText: '99+'
        }, {
            name: '二',
            label: '標(biāo)簽二',
            badgeType: 'dot'
        }, {
            name: '三',
            label: '標(biāo)簽三'
        }],
        contentFour: '一',
        activeNameFour: '一'
    },
    tabsFour(e) {
        this.setData({
            contentFour: e.detail.name,
            activeNameFour: e.detail.name
        })
    }
});

代碼示例 5 :跳轉(zhuǎn)尋址

  • 舊頁面:
    <view class="wrap">
        <view class="card-area">
            <view class="top-description border-bottom">
                <view>支持尋址</view>
            </view>
           <button type="primary" bind:tap="enterNewTabsPage">進(jìn)入頁面并定位到標(biāo)簽二</button>
        </view>
    </view>
    Page({
        data: {
            tabsFour: [{
                name: '一',
                label: '標(biāo)簽一',
                badgeType: 'text',
                badgeText: '99+'
            }, {
                name: '二',
                label: '標(biāo)簽二',
                badgeType: 'dot'
            }, {
                name: '三',
                label: '標(biāo)簽三'
            }],
            contentFour: '一'
        },
        enterNewTabsPage() {
            swan.navigateTo({
                url: "/newTabs/newTabs?position=二"
            });
        }
    });
  • 新頁面:
    <tabs url-query-name="position" class="border-bottom">
        <tab-item s-for="tab in tabs" name="{{tab.name}}" label="{{tab.label}}" />
    </tabs>
    Page({
        data: {
            tabs: [{
                name: '一',
                label: '標(biāo)簽一'
            }, {
                name: '二',
                label: '標(biāo)簽二'
            }, {
                name: '三',
                label: '標(biāo)簽三'
            }],
            content: '一'
        },
        onLoad(query) {
            swan.setURLQuery(query);
            this.setData({
                content: query.position
            });
        },
        onURLQueryChange({newURLQuery, oldURLQuery}) {
            console.log(oldURLQuery, newURLQuery);
            this.setData({
                content: `${newURLQuery.position}`
            });
        }
    });

代碼示例 6 :可尋址標(biāo)簽欄用法

<!-- 指定 url-query-name 后,通過修改url來控制當(dāng)前選中的tab,無需指定 active-name -->
<!-- 雖然 bindtabchange 依舊會(huì)生效,但是直接使用 onURLQueryChange 是更好的做法 -->
<tabs url-query-name="city">
    <tab-item s-for="tab in tabs" name="{{tab.name}}" label="{{tab.label}}" />
</tabs>
<!-- 查看頁面uri變化 -->
<view class="wrap">{{content}}</view>
Page({
    data: {
        tabs: [{
            name: 'guangzhou',
            label: '廣州'
        }, {
            name: 'shenzhen',
            label: '深圳'
        }, {
            name: 'xiamen',
            label: '廈門'
        }, {
            name: 'haerbin',
            label: '哈爾濱'
        }],
        content: 'beijing'
    },
    // 監(jiān)聽函數(shù),點(diǎn)擊切換 tabs 組件或者調(diào)用 swan.setURLQuery 時(shí),url 發(fā)生變化自動(dòng)觸發(fā)
    onURLQueryChange({newURLQuery, oldURLQuery}) {
        console.log(newURLQuery, oldURLQuery)
        this.setData({
            content: `${oldURLQuery.city || 'beijing'} To ${newURLQuery.city}`
        })
    // 此時(shí)tab切換,刷新tabs下方視圖數(shù)據(jù)
    }
});
active-name 和 url-query-name 不要搭配在一起使用:
  • 如果開發(fā)者需要的只是一個(gè)普通的頂部標(biāo)簽欄組件,可以通過 active-name 配合 bindtabchange 來控制當(dāng)前選中 tab-item;
  • 如果開發(fā)者需要的是可以修改頁面 url 的頂部標(biāo)簽欄組件,只需指定 url-query-name,無需設(shè)置 active-name

Bug & Tip

  • Bug:頁面中有多個(gè) tab 組件時(shí),已知徽標(biāo)會(huì)錯(cuò)位,css 里全局設(shè)置 *{box-sizing: content-box;} 做兼容。


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)