xmlplus组件设计系列的tab bar(5)

本章将设计一个广泛用于手持设备的选项卡组件。以下是示意图：

制表符组成

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

Tabbar id=' Tabbar ' TabItem id=' home ' label=' home page '/TabItem id=' setting ' label=' setting '/TabItem id=' logs ' label=' logs '/TabItem id=' about ' label=' about '/Tabbar现在我们将注意力转向选项卡组件的子项目通过示意图，可以发现子项目部分可以分解为子项目容器和包含图标和文本的子项目部分。

a id=' TabItem ' Icon id=' Icon '/span id=' label '主页/span/a所以，现在我们的目标很明确，主要设计了三个组件：图标组件图标、选项卡组件的子项Tabitem、选项卡组件的容器Tabbar。

结构图

因为这个组件相对简单，所以三个子组件可以放在同一层。但是，请注意，我们还有四个图标组件，我们可以创建一个子组件来保存它们。我们的组件结构图如下：

Tabbar/ Tabbar TabItem图标/关于家庭日志设置

图标的实现

让我们从最简单的开始，看看四个图标组件。图标组件主要通过封装SVG文本来实现。因为图标文本很长，所以这里只截取了每个图标文本的一部分。

大约： { XML : ` SVG width=' 48 ' height=' 48 ' viewBox=' 0 0 1024 1024 ' path d=' M507.577907 23.272727 c240.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.344 l 32 0 0 64-32 0-64Z . '//svg`}，设置： {xml:` SVG宽度=' 48 '高度=' 48 ' viewbox=' 0 0 1024 1024 ' path d=' m512 336.664 c-96.68 0-175.336 78 . '//SVG`}请注意这些

xmlplus('ui '，函数(xp，$_，t) { $_()。导入({ Tabbar: {.}，TabItem: {.}});$ _(“图标”)。导入({-有四个图标组件-})；});下面是实现Icon组件图标，与上面不同，它会根据输入的图标类型实例化不同的图标。这种设计可以重用一些相同的代码，避免冗余。

icon : { CSS : ' # icon { width : 1.5 em；height: 1.5emdisplay:内联块；} '，opt: { icon: 'about' }，XML : ' span id=' icon '/'，fun:函数(sys，items，opts){ sys . icon . replace(' icon/' opts . icon)。add CLaSS(' # icon ')；}}该组件的功能项根据输入的图标类型创建一个图标组件，并替换现有的span元素对象。请注意，替换后需要再次添加样式。

分项目的实施

按照由内到外的原则，接下来实现tab组件的子项TabItem。对于这个组件，需要在组件的映射项中进行下级同义词的属性映射，将id属性值映射到内部图标组件的图标属性。

TabItem: { css: '这是样式项的一部分。为了便于组件的整体显示，请省略.map 3360 { ' attrs ' : { icon : ' id-icon ' } }，Xml : ` a id=' tabi tem ' icon id=' icon '/span id=' label '主页/span/a `，fun:函数(sys，items，opts){ sys . label . text(opts . label)；函数select(){ sys . tabit em . addCLaSS(# primary ')；}函数unselect(){ sys . tabitem . remove class(# primary ')；}返回{ select: select，unselect : unselect }；}}该组件提供了在切换选项时在选中和未选中状态之间切换的界面。供标签容器使用。

tab的实现

最后，我们来看看tab组件Tabbar的实现。该组件在用户触摸选项卡时监听事件，主要在监听器中做两件事：一是维护选项卡状态的切换；另一种是在切换选项卡时调度状态更改事件。

Tabbar: {css: '是这里样式项的一部分。为了便于组件的整体显示，…'，xml:`navid=' tabbar'/`，fun 3360 fun(sys，items，opts) {var sel=this。first()；this.on('touchend '，')。/*[@id]'，函数(e) { sel.value()。取消选择()；(sel=this)。值()。select()；this.trigger('switch '，this . tostring())；});if (sel) sel.value()。select()；}}此时，选项卡组件完成。让我们看一个具体的应用：

xmlplus('example '，function (xp，$_，t) { $_()。导入({ index : { XML : ` footer id=' footer '/'，fun:函数(sys，items，opts) { this.on('switch '，(e，target)=console . log(target))；}}，footer : { XML : ` tab bar id=' footer ' tabit em id=' home '标签=' home page'/TabItem id='setting '标签=' setting'/TabItem id='logs '标签=' logs'/tabitem id=' about '标签})；在组件索引中，您可以从选项卡中监听切换事件，以执行相应的操作。例如，结合后面介绍的视图堆栈组件，我们可以在页面之间切换。

本系列文章基于xmlplus框架。如果你不太了解圣诞节，你可以去www.xmlplus.cn。有详细的介绍文件供参考。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。