JavaScript 프레임워크(xmlplus) 구성 요소 소개(5) 탭바

xmlplus는 프론트엔드 및 백엔드 프로젝트의 신속한 개발을 위한 JavaScript프레임워크입니다. 이번 글에서는 주로 참고할만한 가치가 있는 xmlplus 컴포넌트 디자인 시리즈의 탭을 소개합니다. 관심 있는 친구들은

을 참고하세요. 이 장에서는 휴대용 기기에서 흔히 사용되는 탭 컴포넌트를 디자인합니다. 개략도:

탭 구성

구체적으로 구현하기 전에 대상 구성 요소가 어떻게 사용되는지 상상해 보세요. 디자인에 큰 도움이 됩니다. 검사를 통해 다음 XML 구조에 표시된 것처럼 탭 구성 요소를 컨테이너 부분과 하위 부분으로 나눌 수 있습니다.

rree

이제 탭 구성 요소의 하위 부분으로 관심을 전환하여 하위 부분이 어떻게 분해되는지 살펴보겠습니다. 다이어그램에서 하위 섹션을 하위 컨테이너와 아이콘과 텍스트가 포함된 하위 섹션으로 나눌 수 있음을 알 수 있습니다.

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

이제 우리의 목표는 매우 명확합니다. 주로 세 가지 구성 요소, 즉 아이콘 구성 요소 Icon, 탭 구성 요소 TabItem의 하위 항목 및 탭 구성 요소 Tabbar의 컨테이너를 설계하는 것입니다.

구조도

이 구성 요소는 비교적 간단하므로 세 가지 하위 구성 요소를 동일한 레벨에 배치할 수 있습니다. 하지만 네 가지 아이콘 구성요소도 있으며 이를 보유할 하위 항목을 만들 수도 있습니다. 구성 요소 구조 다이어그램은 다음과 같습니다.

Tabbar/
├── Tabbar
├── TabItem
└── Icon/
├─ ─ 소개
├── 홈
├── 로그
└── 설정

아이콘 구현

가장 간단한 것부터 시작해 4가지 아이콘 구성요소를 살펴보겠습니다. 아이콘 구성요소는 주로 SVG 텍스트를 캡슐화하여 구현됩니다. 아이콘 텍스트가 길기 때문에 여기서는 각 아이콘 텍스트의 일부만 가로채고 있습니다.

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

이러한 아이콘은 가상 디렉터리/아이콘 아래에 있습니다. 즉, 다음과 같이 가져와야 합니다.

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

다음은 아이콘 구성 요소 아이콘을 구현하는 것입니다. 여기의 아이콘 구성 요소는 위와 동일합니다. 다르게는 입력 아이콘 유형에 따라 다른 아이콘을 인스턴스화합니다. 이 디자인은 동일한 코드의 일부를 재사용하고 중복을 피할 수 있습니다.

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

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

이 컴포넌트의 함수 항목은 입력 아이콘 유형을 기반으로 아이콘 컴포넌트를 생성하고 기존 스팬 요소객체를 대체합니다. 교체 후 스타일을 다시 추가해야 한다는 점에 유의하세요.

하위 항목 구현

내부에서 외부로 가는 원리에 따라 다음으로 탭 컴포넌트의 하위 항목 TabItem을 구현합니다. 이 컴포넌트의 경우 컴포넌트의 매핑 항목에서 동의어 속성 매핑을 수행하고, id 속성 값을 내부 아이콘 컴포넌트의 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");
  }
}

이 구성 요소는 옵션을 전환할 때 선택 및 선택 취소 상태 간 전환을 위한 인터페이스를 제공합니다. 탭 컨테이너에서 사용됩니다.

탭 구현

마지막으로 탭 컴포넌트인 Tabbar의 구현을 살펴보겠습니다. 이 구성 요소는 사용자가 탭을 탭할 때 이벤트를 수신합니다. 이 구성 요소는 주로 리스너에서 두 가지 작업을 수행합니다. 하나는 탭 상태 전환을 유지하는 것이고, 다른 하나는 탭이 탭될 때 이벤트를 전달하는 것입니다. 전환됨. 상태 변경 이벤트입니다.

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

컴포넌트 Index에서는 해당 탭의 전환 이벤트를 들을 수 있습니다. 운영. 예를 들어 나중에 소개할

View 스택 구성 요소를 사용하여 페이지 간 전환 작업을 수행할 수 있습니다.

이 기사 시리즈는 xmlplus 프레임워크를 기반으로 합니다. xmlplus에 대해 잘 모르신다면 www.xmlplus.cn을 방문해 보세요. 자세한 시작 설명서는 여기에서 확인할 수 있습니다.

[관련 추천]

1.

무료 js 온라인 동영상 튜토리얼

2.

JavaScript 중국어 참조 매뉴얼

3.

php.cn Dugu Jiujian (3) - JavaScript 동영상 튜토리얼

위 내용은 JavaScript 프레임워크(xmlplus) 구성 요소 소개(5) 탭바의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!