xmlplus中如何实现选项卡组件-创新互联

这篇文章主要介绍了xmlplus中如何实现选项卡组件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联公司是一家集网站建设,安丘企业网站建设,安丘品牌网站建设,网站定制,安丘网站建设报价,网络营销,网络优化,安丘网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

示意图：

选项卡组成

在具体实现之前，想像一下目标组件是如何使用的，对于设计会有莫大的帮助。通过观察，可以将选项卡组件分为容器部分和子项部分，正如下面的 XML 结构所展示的。

现在我们把目光切换到选项卡组件的子项部分，来看看子项部分是如何分解的。通过示意图，你可以发现子项部分可以分解为子项容器以及包含一个图标和一个文本的子级部分。

  
  首页

所以，现在我们的目标已经很明确了，主要设计三个组件：图标组件 Icon、选项卡组件的子项 TabItem 以及选项卡组件的容器 Tabbar。

结构图

由于该组件比较简单，所以可以将三种子组件放置在同一层级。但请注意，我们还有四个图标组件，可以创建一个子级用于容纳它们。下面给出我们的组件结构图：

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

图标的实现

我们从最简单的开始，先看四个图标组件，图标组件主要通过封装 SVG 文本来实现，由于图标文本较长，所以这里仅截取每个图标文本的一段。

About: {
  xml: `
        
     `
},
Home: {
  xml: `
        
     `
},
Logs: {
  xml: `
        
     `
},
Setting: {
  xml: `
        
     `
}

请注意，这些图标位于虚拟目录 /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: ``,
  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: `
       
       首页
     `,
  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: ``,
  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: ``,
    fun: function (sys, items, opts) {
      this.on("switch", (e, target) => console.log(target));
    }
  },
  Footer: {
    xml: `
         
         
         
         
       `
  }
  });
});

感谢你能够认真阅读完这篇文章，希望小编分享的“xmlplus中如何实现选项卡组件”这篇文章对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站建设公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前题目：xmlplus中如何实现选项卡组件-创新互联
文章路径：http://dzwzjz.com/article/dcpddo.html