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 個字符內(nèi)體驗(yàn)最佳

錯誤

同時(shí)使用多種徽標(biāo)且長期不消失，影響使用

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

• 舊頁面：

• SWAN

• JS

 
 
 

  
  
  
  
  
  
 
  
  
  
 
  
  
  
 支持尋址
  
  
  
 
  
  
  
 進(jìn)入頁面并定位到標(biāo)簽二
  
  
  
 
  
  
  
 
 
 

 
 
 

  
  
  
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ā)生變化自動觸發(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 不要搭配在一起使用：

1. 如果開發(fā)者需要的只是一個普通的頂部標(biāo)簽欄組件，可以通過 active-name 配合 bindtabchange 來控制當(dāng)前選中 tab-item ；
2. 如果開發(fā)者需要的是可以修改頁面 url 的頂部標(biāo)簽欄組件，只需指定 url-query-name，無需設(shè)置 active-name 。

相關(guān)鏈接：onURLQueryChange

Bug & Tip

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