JavaScript框架（xmlplus）元件的介紹（五）選項卡（Tabbar)

xmlplus 是一個JavaScript框架，用於快速開發前後端專案。這篇文章主要介紹了xmlplus組件設計系列之選項卡，具有一定的參考價值，有興趣的小伙伴們可以參考一下

這一章將設計一個選項卡組件，選項卡組件在手持設備上用的比較多，下面是一個示意圖：

#選項卡組成

##在具體實作之前，想像一下目標元件是如何使用的，對於設計會有莫大的幫助。透過觀察，可以將選項卡組件分為容器部分和子項部分，如下面的 XML 結構所顯示的。

<Tabbar id="tabbar">
  <TabItem id="home" label="首页"/>
  <TabItem id="setting" label="设置"/>
  <TabItem id="logs" label="日志"/>
  <TabItem id="about" label="关于"/>
</Tabbar>

現在我們把目光切換到選項卡元件的子項目部分，來看看子項目部分是如何分解的。透過示意圖，你可以發現子項部分可以分解為子項容器以及包含一個圖示和一個文字的子級部分。

<a id="tabitem">
  <Icon id="icon"/>
  <span id="label">首页</span>
</a>

所以，現在我們的目標已經很明確了，主要設計三個元件：圖示元件 Icon、選項卡元件的子項 TabItem 以及選項卡元件的容器 Tabbar。

結構圖

由於這個元件比較簡單，所以可以將三個種子元件放置在同一層級。但請注意，我們還有四個圖標組件，可以創建一個子級用於容納它們。下面給出我們的元件結構圖：

Tabbar/├── Tabbar
├── TabItem
└── Icon/
     ├─ ─ About
     ├── Home
     ├── Logs
     └── Setting

圖標的實現

我們從最簡單的開始，先看四個圖示元件，圖示元件主要透過封裝SVG 文字來實現，由於圖示文字較長，所以這裡僅截取每個圖示文字的一段。

About: {
  xml: `<svg width="48" height="48" viewBox="0 0 1024 1024">
        <path d="M507.577907 23.272727C240.142852..."/>
     </svg>`
},
Home: {
  xml: `<svg width="48" height="48" viewBox="0 0 1024 1024">
        <path d="M949.082218 519.343245 508.704442..."/>
     </svg>`
},
Logs: {
  xml: `<svg width="48" height="48" viewBox="0 0 1024 1024">
        <path d="M576 125.344l32 0 0 64-32 0 0-64Z..."/>
     </svg>`
},
Setting: {
  xml: `<svg width="48" height="48" viewBox="0 0 1024 1024">
        <path d="M512 336.664c-96.68 0-175.336 78...."/>
     </svg>`
}

請注意，這些圖示位於虛擬目錄/icon 之下，也就是你要像下面這樣導入：

xmlplus("ui", function (xp, $_, t) {
  $_().imports({Tabbar: {... }, TabItem: {...}});

  $_("icon").imports({--这里包含了四个图标组件--});
});

下面來實作圖示元件Icon，這裡的圖示元件與上面是不同的，它會根據輸入的圖示類型實例化不同的圖示。這樣設計可以重複使用部分相同的程式碼，避免冗餘。

Icon: {
  css: "#icon { width: 1.5em; height: 1.5em; display: inline-block; }",
  opt: { icon: "about" },
  xml: `<span id="icon"/>`,
  fun: function (sys, items, opts) {
    sys.icon.replace("icon/" + opts.icon).addClass("#icon");
  }
}

該元件的

函數項目根據輸入的圖示類型建立圖示元件並取代現有的 span 元素物件。注意，替換完後需重新新增樣式。

子項的實作

依照從內到外的原則，接下來實作選項卡元件的子項 TabItem。對於此元件，需要在元件的映射項目中做一次異名的

屬性映射，把 id 屬性值映射給內部的圖示元件的 icon 屬性。

TabItem: {
  css: "这里是样式项部分，为便于组件整体展示，略去...",
  map: {"attrs": { icon: "id->icon" } },
  xml: `<a id="tabitem">
       <Icon id="icon"/>
       <span id="label">首页</span>
     </a>`,
  fun: function (sys, items, opts) {
    sys.label.text(opts.label);
    function select() {
      sys.tabitem.addClass("#primary");
    }
    function unselect() {
      sys.tabitem.removeClass("#primary");
    }
    return { select: select, unselect: unselect };
  }
}

此元件提供了用於選項切換時選取與非選取

狀態之間切換的介面。以供選項卡容器使用。

選項卡的實作

最後來看下選項卡元件 Tabbar 的實作。此元件偵聽了使用者觸擊選項卡時的

事件，在偵聽器裡主要做兩件事：一是維持選項卡狀態的切換；另一是派發一選項卡切換時的狀態改變事件。

Tabbar: {
  css: "这里是样式项部分，为便于组件整体展示，略去...",
  xml: `<nav id="tabbar"/>`,
  fun: function (sys, items, opts) {
    var sel = this.first();
    this.on("touchend", "./*[@id]", function (e) {
      sel.value().unselect();
      (sel = this).value().select();
      this.trigger("switch", this.toString());
    });
    if (sel) sel.value().select();
  }
}

至此，一個選項卡元件算是完成了，下面來看下具體的一個應用：

xmlplus("example", function (xp, $_, t) {
  $_().imports({
  Index: {
    xml: `<Footer id=&#39;footer&#39;/>`,
    fun: function (sys, items, opts) {
      this.on("switch", (e, target) => console.log(target));
    }
  },
  Footer: {
    xml: `<Tabbar id="footer">
         <TabItem id="home" label="首页"/>
         <TabItem id="setting" label="设置"/>
         <TabItem id="logs" label="日志"/>
         <TabItem id="about" label="关于"/>
       </Tabbar>`
  }
  });
});

在元件Index 中，你可以偵聽來自選項卡的切換事件來做相應的操作。例如結合後續我們介紹的

視圖堆疊元件做頁面之間的切換操作。

本系列文章是基於 xmlplus 框架。如果你對 xmlplus 沒有太多了解，可以造訪 www.xmlplus.cn。這裡有詳盡的入門文件可供參考。

【相關推薦】

1. 

免費js線上影片教學

2.

 JavaScript中文參考手冊

3.

php.cn獨孤九賤（3）－JavaScript影片教學

以上是JavaScript框架（xmlplus）元件的介紹（五）選項卡（Tabbar)的詳細內容。更多資訊請關注PHP中文網其他相關文章！