日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)百度小程序教程：tabs標簽欄
  • tabs 標簽欄
    • 屬性說明
    • 示例
      • 代碼示例 1：默認樣式
      • 代碼示例 2：可橫滑展示
      • 代碼示例 3：自定義樣式
      • 代碼示例 4：顯示徽標
      • 代碼示例 5：跳轉(zhuǎn)尋址
      • 代碼示例 6：可尋址標簽欄用法
    • Bug & Tip

    tabs 標簽欄

    基礎庫 3.100.4 版本開始支持。

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

    解釋：標簽欄，用于讓用戶在不同的視圖中進行切換。標簽欄組件的使用需要通過 tabs 和 tab-item 組件配合實現(xiàn)。設計文檔詳見標簽欄。

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

    屬性說明

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

    示例

    跳轉(zhuǎn)編輯工具

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

    在 WEB IDE 中打開

    掃碼體驗

    代碼示例

    請使用百度APP掃碼

    代碼示例 1：默認樣式

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  默認樣式
      4.   
  
  
    4.  
      5.   
  
  
    5.  class="border-bottom"
      6.   
  
  
    6.  active-name="{{activeNameOne}}"
      7.   
  
  
    7.  bindtabchange="tabsOne">
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.   
  
  
    11.  標簽{{content}}內(nèi)容展示區(qū)
      12.   
  
  
    12.  
      13.   
  
  
    13.  
      14.   
  
  
      15.  
 
 
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  tabs: [{
      4.   
  
  
    4.  name: '一',
      5.   
  
  
    5.  label: '標簽一'
      6.   
  
  
    6.  }, {
      7.   
  
  
    7.  name: '二',
      8.   
  
  
    8.  label: '標簽二'
      9.   
  
  
    9.  }, {
      10.   
  
  
    10.  name: '三',
      11.   
  
  
    11.  label: '標簽三'
      12.   
  
  
    12.  }],
      13.   
  
  
    13.  content: '一',
      14.   
  
  
    14.  activeNameOne: '一'
      15.   
  
  
    15.  },
      16.   
  
  
    16.  tabsOne(e) {
      17.   
  
  
    17.  this.setData({
      18.   
  
  
    18.  content: e.detail.name,
      19.   
  
  
    19.  activeNameOne: e.detail.name
      20.   
  
  
    20.  })
      21.   
  
  
    21.  }
      22.   
  
  
    22. });
      23.

    設計指南

    普通標簽欄中子項（tab-item）的數(shù)量 2-5 個為宜。內(nèi)容文字（label）應簡潔易懂，長度不大于 4 個漢字為宜。

    錯誤

    只有 1 個子項時請不要使用 tabs

    錯誤

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

    代碼示例 2：可橫滑展示

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  可橫滑顯示
      5.   
  
  
    5.  max-tab-item-amount="5"
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  class="border-bottom" 
      9.   
  
  
    9.  active-name="{{activeNameTwo}}"
      10.   
  
  
    10.  max-tab-item-amount="5"
      11.   
  
  
    11.  bindtabchange="tabsTwo">
      12.   
  
  
    12.  
      13.   
  
  
    13.  
      14.   
  
  
    14.  
      15.   
  
  
    15.  標簽{{contentTwo}}內(nèi)容展示區(qū)
      16.   
  
  
    16.  
      17.   
  
  
    17.  
      18.   
  
  
      19.  
 
 
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  tabsTwo: [{
      4.   
  
  
    4.  name: '一',
      5.   
  
  
    5.  label: '標簽一'
      6.   
  
  
    6.  }, {
      7.   
  
  
    7.  name: '二',
      8.   
  
  
    8.  label: '標簽二'
      9.   
  
  
    9.  }, {
      10.   
  
  
    10.  name: '三',
      11.   
  
  
    11.  label: '標簽三'
      12.   
  
  
    12.  }, {
      13.   
  
  
    13.  name: '四',
      14.   
  
  
    14.  label: '標簽四'
      15.   
  
  
    15.  }, {
      16.   
  
  
    16.  name: '五',
      17.   
  
  
    17.  label: '標簽五'
      18.   
  
  
    18.  }, {
      19.   
  
  
    19.  name: '六',
      20.   
  
  
    20.  label: '標簽六'
      21.   
  
  
    21.  }, {
      22.   
  
  
    22.  name: '七',
      23.   
  
  
    23.  label: '標簽七'
      24.   
  
  
    24.  }],
      25.   
  
  
    25.  contentTwo: '一',
      26.   
  
  
    26.  activeNameTwo: '一'
      27.   
  
  
    27.  },
      28.   
  
  
    28.  tabsTwo(e) {
      29.   
  
  
    29.  this.setData({
      30.   
  
  
    30.  contentTwo: e.detail.name,
      31.   
  
  
    31.  activeNameTwo: e.detail.name
      32.   
  
  
    32.  })
      33.   
  
  
    33.  }
      34.   
  
  
    34. });
      35.

    代碼示例 3：自定義樣式

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  自定義樣式
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  class="border-bottom"
      8.   
  
  
    8.  tabs-background-color="#3388ff"
      9.   
  
  
    9.  tabs-underline-color="#fff"
      10.   
  
  
    10.  tabs-inactive-text-color="#fff"
      11.   
  
  
    11.  tabs-active-text-color="#fff"
      12.   
  
  
    12.  bindtabchange="tabsThree"
      13.   
  
  
    13.  active-name="{{activeNameThree}}">
      14.   
  
  
    14.  
      15.   
  
  
    15.  
      16.   
  
  
    16.  
      17.   
  
  
    17.  標簽{{contentThree}}內(nèi)容展示區(qū)
      18.   
  
  
    18.  
      19.   
  
  
    19.  
      20.   
  
  
      21.  
 
 
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  tabsThree: [{
      4.   
  
  
    4.  name: '一',
      5.   
  
  
    5.  label: '標簽一',
      6.   
  
  
    6.  }, {
      7.   
  
  
    7.  name: '二',
      8.   
  
  
    8.  label: '標簽二',
      9.   
  
  
    9.  }, {
      10.   
  
  
    10.  name: '三',
      11.   
  
  
    11.  label: '標簽三'
      12.   
  
  
    12.  }],
      13.   
  
  
    13.  contentThree: '一',
      14.   
  
  
    14.  activeNameThree: '一'
      15.   
  
  
    15.  },
      16.   
  
  
    16.  tabsThree(e) {
      17.   
  
  
    17.  this.setData({
      18.   
  
  
    18.  contentThree: e.detail.name,
      19.   
  
  
    19.  activeNameThree: e.detail.name
      20.   
  
  
    20.  })
      21.   
  
  
    21.  }
      22.   
  
  
    22. });
      23.

    設計指南

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

    錯誤

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

    錯誤

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

    代碼示例 4：顯示徽標

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  顯示徽標
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  class="border-bottom" 
      8.   
  
  
    8.  bindtabchange="tabsFour"
      9.   
  
  
    9.  active-name="{{activeNameFour}}">
      10.   
  
  
    10.  
      11.   
  
  
    11.  s-for="tab in tabsFour" 
      12.   
  
  
    12.  badge-type="{{tab.badgeType}}" 
      13.   
  
  
    13.  badge-text="{{tab.badgeText}}"
      14.   
  
  
    14.  name="{{tab.name}}" 
      15.   
  
  
    15.  label="{{tab.label}}" />
      16.   
  
  
    16.  
      17.   
  
  
    17.  
      18.   
  
  
    18.  標簽{{contentFour}}內(nèi)容展示區(qū)
      19.   
  
  
    19.   
      20.   
  
  
    20.   
      21.   
  
  
      22.  
 
 
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  tabsFour: [{
      4.   
  
  
    4.  name: '一',
      5.   
  
  
    5.  label: '標簽一',
      6.   
  
  
    6.  badgeType: 'text',
      7.   
  
  
    7.  badgeText: '99+'
      8.   
  
  
    8.  }, {
      9.   
  
  
    9.  name: '二',
      10.   
  
  
    10.  label: '標簽二',
      11.   
  
  
    11.  badgeType: 'dot'
      12.   
  
  
    12.  }, {
      13.   
  
  
    13.  name: '三',
      14.   
  
  
    14.  label: '標簽三'
      15.   
  
  
    15.  }],
      16.   
  
  
    16.  contentFour: '一',
      17.   
  
  
    17.  activeNameFour: '一'
      18.   
  
  
    18.  },
      19.   
  
  
    19.  tabsFour(e) {
      20.   
  
  
    20.  this.setData({
      21.   
  
  
    21.  contentFour: e.detail.name,
      22.   
  
  
    22.  activeNameFour: e.detail.name
      23.   
  
  
    23.  })
      24.   
  
  
    24.  }
      25.   
  
  
    25. });
      26.

    設計指南

    為徽標設置合理的消失機制，例如點擊對應子項時徽標消失。不建議同時使用多種徽標，以及徽標長期不消失干擾用戶。

    正確

    徽標長度控制在 3 個字符內(nèi)體驗最佳

    錯誤

    同時使用多種徽標且長期不消失，影響使用

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

    • 舊頁面：

    • SWAN

    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  支持尋址
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
      9.  
 
 
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  tabsFour: [{
      4.   
  
  
    4.  name: '一',
      5.   
  
  
    5.  label: '標簽一',
      6.   
  
  
    6.  badgeType: 'text',
      7.   
  
  
    7.  badgeText: '99+'
      8.   
  
  
    8.  }, {
      9.   
  
  
    9.  name: '二',
      10.   
  
  
    10.  label: '標簽二',
      11.   
  
  
    11.  badgeType: 'dot'
      12.   
  
  
    12.  }, {
      13.   
  
  
    13.  name: '三',
      14.   
  
  
    14.  label: '標簽三'
      15.   
  
  
    15.  }],
      16.   
  
  
    16.  contentFour: '一'
      17.   
  
  
    17.  },
      18.   
  
  
    18.  enterNewTabsPage() {
      19.   
  
  
    19.  swan.navigateTo({
      20.   
  
  
    20.  url: "/newTabs/newTabs?position=二"
      21.   
  
  
    21.  });
      22.   
  
  
    22.  }
      23.   
  
  
    23. });
      24.

    • 新頁面：

    • SWAN

    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
      4.  
 
 
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  tabs: [{
      4.   
  
  
    4.  name: '一',
      5.   
  
  
    5.  label: '標簽一'
      6.   
  
  
    6.  }, {
      7.   
  
  
    7.  name: '二',
      8.   
  
  
    8.  label: '標簽二'
      9.   
  
  
    9.  }, {
      10.   
  
  
    10.  name: '三',
      11.   
  
  
    11.  label: '標簽三'
      12.   
  
  
    12.  }],
      13.   
  
  
    13.  content: '一'
      14.   
  
  
    14.  },
      15.   
  
  
    15.  onLoad(query) {
      16.   
  
  
    16.  swan.setURLQuery(query);
      17.   
  
  
    17.  this.setData({
      18.   
  
  
    18.  content: query.position
      19.   
  
  
    19.  });
      20.   
  
  
    20.  },
      21.   
  
  
    21.  onURLQueryChange({newURLQuery, oldURLQuery}) {
      22.   
  
  
    22.  console.log(oldURLQuery, newURLQuery);
      23.   
  
  
    23.  this.setData({
      24.   
  
  
    24.  content: `${newURLQuery.position}`
      25.   
  
  
    25.  });
      26.   
  
  
    26.  }
      27.   
  
  
    27. });
      28.

    代碼示例 6：可尋址標簽欄用法

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
      3.   
  
  
      4.   
  
  
    4.  
      5.   
  
  
      6.   
  
  
      7.   
  
  
    7. {{content}}
      8.  
 
 
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  tabs: [{
      4.   
  
  
    4.  name: 'guangzhou',
      5.   
  
  
    5.  label: '廣州'
      6.   
  
  
    6.  }, {
      7.   
  
  
    7.  name: 'shenzhen',
      8.   
  
  
    8.  label: '深圳'
      9.   
  
  
    9.  }, {
      10.   
  
  
    10.  name: 'xiamen',
      11.   
  
  
    11.  label: '廈門'
      12.   
  
  
    12.  }, {
      13.   
  
  
    13.  name: 'haerbin',
      14.   
  
  
    14.  label: '哈爾濱'
      15.   
  
  
    15.  }],
      16.   
  
  
    16.  content: 'beijing'
      17.   
  
  
    17.  },
      18.   
  
  
    18.  // 監(jiān)聽函數(shù)，點擊切換 tabs 組件或者調(diào)用 swan.setURLQuery 時，url 發(fā)生變化自動觸發(fā)
      19.   
  
  
    19.  onURLQueryChange({newURLQuery, oldURLQuery}) {
      20.   
  
  
    20.  console.log(newURLQuery, oldURLQuery)
      21.   
  
  
    21.  this.setData({
      22.   
  
  
    22.  content: `${oldURLQuery.city || 'beijing'} To ${newURLQuery.city}`
      23.   
  
  
    23.  })
      24.   
  
  
    24.  // 此時tab切換，刷新tabs下方視圖數(shù)據(jù)
      25.   
  
  
    25.  }
      26.   
  
  
    26. });
      27.

    active-name 和 url-query-name 不要搭配在一起使用：

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

    相關鏈接：onURLQueryChange

    Bug & Tip

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

    分享題目：創(chuàng)新互聯(lián)百度小程序教程：tabs標簽欄
    文章位置：http://www.dlmjj.cn/article/dpigshh.html