Introduction aux composants du framework JavaScript (xmlplus) (5) Barre d'onglets

xmlplus est un JavaScriptframework pour le développement rapide de projets front-end et back-end. Cet article présente principalement l'onglet de la série de conception de composants xmlplus, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Ce chapitre concevra un composant d'onglet, qui est portable et couramment utilisé sur les équipements. un diagramme schématique :

Composition des onglets

Avant l'implémentation spécifique, imaginer comment le composant cible est utilisé sera d'une grande aide à la conception. Par inspection, le composant onglet peut être divisé en une partie conteneur et une partie enfant, comme indiqué dans la structure XML suivante.

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

Passons maintenant à la partie sous-élément du composant onglet pour voir comment la partie sous-élément est décomposée. À partir du diagramme, vous pouvez voir que la section enfant peut être décomposée en un conteneur enfant et une section enfant contenant une icône et un texte.

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

Donc, maintenant notre objectif est très clair, concevoir principalement trois composants : le composant icône Icon, le sous-élément TabItem du composant onglet et le conteneur Tabbar du composant onglet.

Schéma de structure

Ce composant étant relativement simple, les trois sous-composants peuvent être placés au même niveau. Mais veuillez noter que nous avons également quatre composants d'icônes et que nous pouvons créer un enfant pour les contenir. Notre diagramme de structure de composants est donné ci-dessous :

Tabbar/
├── Tabbar
├── TabItem
└── Icon/
├─ ─ À propos
├── Accueil
├── Journaux
└── Paramètres

Mise en œuvre des icônes

Commençons par le plus simple et examinons les quatre composants d'icône. Le composant icône est principalement implémenté en encapsulant du texte SVG. Étant donné que le texte de l'icône est long, seule une section de chaque texte d'icône est interceptée ici.

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>`
}

Veuillez noter que ces icônes sont situées sous le répertoire/icône virtuel, c'est-à-dire que vous devez les importer comme suit :

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

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

Ce qui suit est d'implémenter l'icône Icône du composant, l'icône ici Le composant est différent de celui ci-dessus, il instanciera différentes icônes en fonction du type d'icône d'entrée. Cette conception permet de réutiliser une partie du même code et d’éviter la redondance.

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");
  }
}

L'élément fonction de ce composant crée un composant d'icône basé sur le type d'icône d'entrée et remplace l'élément span existant objet . Notez que vous devez rajouter le style après le remplacement.

Implémentation du sous-élément

Selon le principe de l'intérieur vers l'extérieur, implémentez ensuite le sous-élément TabItem du composant onglet. Pour ce composant, vous devez également effectuer un mappage d'attribut dans l'élément de mappage du composant et mapper la valeur de l'attribut id à l'attribut icon du composant icône interne.

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 };
  }
}

Ce composant fournit une interface pour basculer entre les états sélectionnés et non sélectionnés lors du changement d'option. À utiliser avec les conteneurs à onglets.

Implémentation des onglets

Enfin, regardons l'implémentation du composant d'onglet Tabbar. Ce composant écoute l' événement lorsque l'utilisateur appuie sur l'onglet. Il fait principalement deux choses dans l'écouteur : l'une consiste à maintenir le changement d'état de l'onglet ; commuté.

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();
  }
}

À ce stade, un composant onglet est terminé. Jetons un coup d'œil à une application spécifique :

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>`
  }
  });
});

Dans le composant Index, vous pouvez écouter les messages de l'onglet. Changez d'événement pour effectuer les opérations correspondantes. Par exemple, utilisez le composant de pile View que nous présenterons plus tard pour effectuer des opérations de commutation entre les pages.

Cette série d'articles est basée sur le framework xmlplus. Si vous ne savez pas grand-chose sur XMLplus, vous pouvez visiter www.xmlplus.cn. Une documentation détaillée de démarrage est disponible ici.

[Recommandations associées]

1. Tutoriel vidéo en ligne js gratuit

2. Manuel de référence JavaScript chinois

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!