tabs 標(biāo)簽欄

基礎(chǔ)庫 3.100.4 版本開始支持。
創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)巴州,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

解釋：標(biāo)簽欄，用于讓用戶在不同的視圖中進(jìn)行切換。標(biāo)簽欄組件的使用需要通過 tabs 和 tab-item 組件配合實(shí)現(xiàn)。設(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ì)打開該值對應(yīng)的 tab 頁。由于這種綁定關(guān)系的存在，相比于普通標(biāo)簽欄，可尋址標(biāo)簽欄更利于搜索引擎收錄。例如：主頁的多頻道切換。

屬性說明

屬性名	類型	默認(rèn)值	必填	說明	最低版本
tabs-background-color	String	‘#fff’	否	tabs 背景色,必須填寫十六進(jìn)制顏色	3.100.4 低版本請做兼容性處理
tabs-active-text-color	String	‘#000’	否	tabs 激活 tab-item 文字顏色	3.100.4 低版本請做兼容性處理
tabs-inactive-text-color	String	‘#666’	否	tabs 非激活 tab-item 文字顏色	3.100.4 低版本請做兼容性處理
tabs-underline-color	String	‘#333’	否	tabs 激活 tab-item 下劃線顏色	3.100.4 低版本請做兼容性處理
active-name	String	無	否	僅用于普通標(biāo)簽欄組件，當(dāng)前激活 tab-item 的對應(yīng)的 name 值，須搭配 bindtabchange 一起使用。	3.100.4 低版本請做兼容性處理
url-query-name	String	無	否	僅用于可尋址標(biāo)簽欄組件，當(dāng)前 tab 所改變的 url query 中參數(shù) key，需要通過 tabs 修改頁面 url 的時(shí)候設(shè)置。	3.100.4 低版本請做兼容性處理
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 低版本請做兼容性處理
bindtabchange	EventHandle		否	tab 被點(diǎn)擊的回調(diào)，可以在 e.detail.name 中取到當(dāng)前點(diǎn)擊的 tab-item 對應(yīng)的 name 值	3.100.4 低版本請做兼容性處理

示例

跳轉(zhuǎn)編輯工具

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

在 WEB IDE 中打開

掃碼體驗(yàn)

代碼示例

請使用百度APP掃碼

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

SWAN
JS

 
 
 
  
  
    
  
     
  
   默認(rèn)樣式  
  
   
  
  
   class="border-bottom"  
  
   active-name="{{activeNameOne}}"  
  
   bindtabchange="tabsOne">  
  
     
  
     
  
     
  
   標(biāo)簽{{content}}內(nèi)容展示區(qū)


 
 
 
  
  
  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í)請不要使用 tabs
錯(cuò)誤
內(nèi)容過長出現(xiàn)折行不美觀，影響閱讀體驗(yàn)
代碼示例 2：可橫滑展示
SWAN
JS
 
 
 
  
  
    
  
     
  
     
  
   可橫滑顯示  
  
   max-tab-item-amount="5"  
  
     
  
   
  
  
   class="border-bottom"   
  
   active-name="{{activeNameTwo}}"  
  
   max-tab-item-amount="5"  
  
   bindtabchange="tabsTwo">  
  
     
  
     
  
     
  
   標(biāo)簽{{contentTwo}}內(nèi)容展示區(qū)  
  
     
  
     
  
   
 
 

 
 
 
  
  
  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：自定義樣式
SWAN
JS
 
 
 
  
  
    
  
     
  
     
  
   自定義樣式  
  
     
  
   
  
  
   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}}">  
  
     
  
     
  
     
  
   標(biāo)簽{{contentThree}}內(nèi)容展示區(qū)  
  
     
  
     
  
   
 
 

 
 
 
  
  
  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è)計(jì)指南
自定義樣式時(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)
SWAN
JS
 
 
 
  
  
    
  
     
  
     
  
   顯示徽標(biāo)  
  
     
  
   
  
  
   class="border-bottom"   
  
   bindtabchange="tabsFour"  
  
   active-name="{{activeNameFour}}">  
  
   
  
  
   s-for="tab in tabsFour"   
  
   badge-type="{{tab.badgeType}}"   
  
   badge-text="{{tab.badgeText}}"  
  
   name="{{tab.name}}"   
  
   label="{{tab.label}}" />  
  
     
  
     
  
   標(biāo)簽{{contentFour}}內(nèi)容展示區(qū)  
  
      
  
      
  
   
 
 

 
 
 
  
  
  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  
  
   })  
  
   }  
  
  }); 
 
 
設(shè)計(jì)指南
為徽標(biāo)設(shè)置合理的消失機(jī)制，例如點(diǎn)擊對應(yīng)子項(xiàng)時(shí)徽標(biāo)消失。不建議同時(shí)使用多種徽標(biāo)，以及徽標(biāo)長期不消失干擾用戶。 
 
正確
徽標(biāo)長度控制在 3 個(gè)字符內(nèi)體驗(yàn)最佳
 
錯(cuò)誤
同時(shí)使用多種徽標(biāo)且長期不消失，影響使用
代碼示例 5：跳轉(zhuǎn)尋址

舊頁面：

SWAN
JS
 
 
 
  
  
    
  
     
  
     
  
   支持尋址  
  
     
  
     
  
     
  
   
 
 
 
 
 
  
  
  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=二"  
  
   });  
  
   }  
  
  }); 
 
 

新頁面：

SWAN
JS
 
 
 
  
  
    
  
     
  
   
 
 
 
 
 
  
  
  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)簽欄用法
SWAN
JS
 
 
 
  
  
    
  
    
  
    
  
     
  
    
  
    
  
  {{content}} 
 
 
 
 
 
  
  
  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 。

相關(guān)鏈接：onURLQueryChange
Bug & Tip
Bug：頁面中有多個(gè) tab 組件時(shí)，已知徽標(biāo)會(huì)錯(cuò)位，css 里全局設(shè)置*{box-sizing: content-box;}做兼容。
                                                

                                                分享題目：創(chuàng)新互聯(lián)百度小程序教程：tabs標(biāo)簽欄                                                

                                                當(dāng)前鏈接：http://www.5511xx.com/article/dpigshh.html


                                            
                                                
                                                    其他資訊
                                                
                                                
                                                    
                                                        
                                                                百度指數(shù)收費(fèi)嗎
                                                            

                                                                申請網(wǎng)絡(luò)平臺(tái)要多久能上線?（申請網(wǎng)絡(luò)平臺(tái)要多久能上線呢)
                                                            

                                                                win10和server2008r2哪個(gè)做服務(wù)器好？windows服務(wù)器安全
                                                            

                                                                表格公式篩選數(shù)據(jù)庫原理及應(yīng)用技巧(在表格中如何利用公式篩選數(shù)據(jù)庫)
                                                            

                                                                創(chuàng)新互聯(lián)OceanBase教程：OceanBaseLNNVL