支付寶小程序擴(kuò)展組件 橫向選項(xiàng)卡·Tabs

應(yīng)用當(dāng)需要展示二級以上內(nèi)容時，屏幕頂部會展示一個標(biāo)簽欄，并提供在應(yīng)用的不同部分之間快速切換的功能。標(biāo)簽欄在所有屏幕方向上保持相同的高度。 選項(xiàng)：根據(jù)業(yè)務(wù)場景需要可以設(shè)定2個以上選項(xiàng)，當(dāng)選項(xiàng)超過屏幕寬度后可以橫滑選項(xiàng)行查看所有內(nèi)容。 新內(nèi)容標(biāo)記：選項(xiàng)卡上能顯示未讀或者新內(nèi)容標(biāo)記。 場景描述：當(dāng)選項(xiàng)卡內(nèi)容提供給用戶自定義配置時提供編輯/新建入口，用戶可以由此進(jìn)入編輯頁面進(jìn)行修改。

說明：

• 通過觸發(fā) onChange 事件，設(shè)置 setData 對應(yīng)的數(shù)據(jù)，從而切換頁面上的 tabs 數(shù)據(jù)；
• 可使用 my.request 傳數(shù)據(jù)給后端。

掃碼體驗(yàn)

示例代碼

{
 "defaultTitle": "Tabs 橫向選項(xiàng)卡",
 "usingComponents": {
   "tabs": "mini-ali-ui/es/tabs/index",
   "tab-content": "mini-ali-ui/es/tabs/tab-content/index"
 }
}
<tabs
  tabs="{{tabs2}}"
  tabsName="activeTab2"
  onTabClick="handleTabClick"
  onChange="handleTabChange"
  onPlusClick="handlePlusClick"
  activeTab="{{activeTab2}}"
  showPlus="{{true}}"
  capsule="{{false}}"
  hasSubTitle="{{false}}"
  tabBarUnderlineWidth="20px"
  stickyBar="{{true}}"
>
  <block a:for="{{tabs2}}">
    <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:if="{{index === 0}}">
      <view class="tab-content" style="height: 300px;">高度為 300px {{item.title}}</view>
    </tab-content>
    <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:elif="{{index === 2}}">
      <view class="tab-content" style="height: 200px;">改變 tab-content 高度為 200px {{item.title}}</view>
    </tab-content>
    <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:else>
      <view class="tab-content">content of {{item.title}}</view>
    </tab-content>
  </block>
</tabs>

Page({
  data: {
    tabs2: [
      {
        title: '選項(xiàng)',
        subTitle: '描述文案',
        number: '66',
        showBadge: true,
        badge: {
          arrow: false,
          stroke: true,
        },
      },
      {
        title: '選選',
        subTitle: '描述文案',
        number: '文字',
        showBadge: true,
        badge: {
          arrow: true,
        },
      },
      {
        title: '二二',
        subTitle: '描述文案',
        showBadge: true,
        number: 0,
      },
      {
        title: '選二',
        subTitle: '描述文案',
        number: '99+',
        showBadge: false,
      },
      {
        title: '項(xiàng)二',
        subTitle: '描述文案',
        number: '6',
      },
      {
        title: '二二',
        subTitle: '描述文案',
      },
      {
        title: '選二',
        subTitle: '描述文案',
      },
      {
        title: '項(xiàng)二',
        subTitle: '描述文案',
        number: '6',
      },
    ],
    activeTab2: 0,
  },
  handleTabClick({ index, tabsName }) {
    this.setData({
      [tabsName]: index,
    });
  },
  handleTabChange({ index, tabsName }) {
    this.setData({
      [tabsName]: index,
    });
  },
  handlePlusClick() {
    my.alert({
      content: 'plus clicked',
    });
  },
  onPageScroll({ scrollTop }) {
    // onPageScroll 主要是用于電梯組件（elevator 模式）滾動時的高度計算；
    // activeTab 被觸發(fā)高亮的 tab；
    // getFloorNumber 當(dāng)前 tab-content 所在的索引值；
    // this.data.floorNumber 將會有組件內(nèi)部根據(jù) tab-content 的高度計算；
    // ※※※ 當(dāng)使用 elevator 模式的 tabs 組件時，這部分的代碼請直接 copy 使用 ※※※
    if (scrollTop === 0) {
      this.setData({
        activeTab: 0,
        getFloorNumber: 0,
      });
    } else {
      // 電梯組件時需要添加，計算頁面滾動時，tab 的切換；
      for (let i = 0; i <= this.data.floorNumber.length; i++) {
        if (scrollTop >= this.data.floorNumber[i]) {
          this.setData({
            activeTab: i,
            getFloorNumber: i,
          });
        }
      }
    }
  },
});

.tab-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  box-sizing: border-box;
  /* 如果 swipeable="{{true}}"，需要增加 height */
  /* height: 350px; */
  /* 為了體現(xiàn) stickyBar 的作用而增加的 tab-content 的高度 */
  height: 100vh;
}

屬性

tabs 橫向選項(xiàng)卡主要是由 <tabs> 和 <tab-content> 兩個標(biāo)簽組成，包含的類型較多，可通過 <tabs> 的屬性進(jìn)行配置

tab-content

Bug & Tip

• capsule 為 true 時，tab 選項(xiàng)卡顯示為膠囊模式。
• hasSubTitle 為 true 時，tabs 選項(xiàng)卡會顯示帶有描述的模式，但如果 tabs 數(shù)據(jù)中的 subTitle 為空，將不會顯示描述文案。
• 當(dāng) tabs 選項(xiàng)卡為膠囊模式時，會根據(jù) tabs 數(shù)據(jù)中的 number 值顯示數(shù)字。
• 如 elevator 為 true，則為電梯組件，<tab-content> 將豎排展示，自動計算每個 <tab-content> 的坐標(biāo)后，根據(jù)索引值定位指向；
  • 在 elevator 模式中，this.data.floorNumber 將會根據(jù)所有 tab-content 的高度計算所得，無需修改；
  • 電梯組件需要考慮頁面滾動時判斷每個 tab-content 的位置，因此需要在頁面級別中加入 onPageScroll({ scrollTop }) {}，具體可參考代碼示例中的代碼；
• tabsName 是為了能更好獲取到當(dāng)前 tab 選項(xiàng)卡的名稱進(jìn)行識別，值需要與 activeTab 的 key 值相同，如：activeTab="{{activeTab2}}"，那么 tabsName="activeTab2"。
• tabs 中的 showBadge 為 true 時，number 中的值會以 badge 形式展示，并且不受 tab 類型影響，否則 number 中的值僅在膠囊 tab 中有效；
  • 可同時添加 badge: { arrow: true, stroke: true, } 控制 badge 的樣式；
  • arrow 可展示有箭頭的 badge，箭頭僅有左方向；
  • stroke 可展示有描邊的 badge；
• 當(dāng) elevatorTop 的值為 px 單位時，elevatorContentTop 距離頂部的高度則是 elevatorTop + tab 選項(xiàng)卡的高度；
• 當(dāng) plusImg 的值為空時才可以使用 plusIcon、 plusIconSize 以及 plusIconColor這三個值；
• 當(dāng) plusImg 的值為空時， plusImgWidth 和 plusImgHeight 設(shè)置將無效；
• 如果 plusIcon 為空， plusIconSize 和 plusIconColor 修改的是默認(rèn)的 icon 大小以及顏色；

tab-content 高度自適應(yīng)說明

tabs 組件內(nèi)容區(qū)域高度是否能夠自適應(yīng)，需要注意 swipeable 的值：

• swipeable='{{true}}'：內(nèi)容區(qū)域可滑動，且相對應(yīng) tab 標(biāo)簽卡；但內(nèi)容區(qū)域高度為固定值，需要在 acss 文件中設(shè)定 height 值，否則高度會異常；如需要自適應(yīng)高度的話，那么請使用 tabContentHeight 重設(shè)高度，實(shí)現(xiàn)方法：點(diǎn)擊不同 tab 標(biāo)簽卡，獲取當(dāng)前 tab-content 的高度，賦值給 tabContentHeight 即可；
• swipeable='{{false}}'：內(nèi)容區(qū)域不可滑動，此時高度表現(xiàn)形式有兩種，且可以不需要在 acss 文件設(shè)定 height 值：
  • <tab-content> 中無 tabId 和 activeTab 兩個屬性，此時的高度將以所有內(nèi)容區(qū)域中最高的為基準(zhǔn)展示；
  • <tab-content> 中包含 tabId 和 activeTab 兩個屬性時 tabId="{{index}}" activeTab="{{activeTab}}"，內(nèi)容區(qū)域所展示的高度將會隨著不同模塊的高度而改變。