W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
解釋:標(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)做兼容性處理 |
代碼示例 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
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: