Feat/tabs (#26)

* feat(Tabs): add stickTop api * feat(tabs): add fallback in sdk 1.0 * feat(tabs): add onTransiton, onTouchStart, fallback for tabs * fix(tabs): fix right fade style * feat(tabs): update fallback mode * docs(tabs): add fallback mode demo * perf(tabs): enhance tab content render * feat(tabs): add touch-angle prop in tabs * fix(tabs): fix touch-angle prop * fix(tabs): add Null value determination for createSelectQuery * chore(tabs): code style * fix(tabs): fix class name error
ant-design · Apr 1, 2022 · 69002c9 · 69002c9
1 parent d3ae912
commit 69002c9
Show file tree

Hide file tree

Showing 18 changed files with 554 additions and 91 deletions.
diff --git a/demo/app.json b/demo/app.json
@@ -20,6 +20,7 @@
     "pages/SwipeAction/index",
     "pages/SwipeActionRef/index",
     "pages/Tabs/index",
+    "pages/TabsFallback/index",
     "pages/VTabs/index",
     "pages/Stepper/index",
     "pages/Steps/index",

diff --git a/demo/pages/TabsFallback/index.axml b/demo/pages/TabsFallback/index.axml
@@ -0,0 +1,20 @@
+<tabs 
+  index="{{curIdx}}" 
+  type="{{type}}" 
+  fallback="{{true}}" 
+  sticky="{{sticky}}"
+  onChange="changeTab">
+  <block a:for="{{tabs}}">
+    <tab-content 
+      style="{{curIdx===index ? '' : 'display:none'}}"
+      tab="{{item}}">
+      <view>
+        {{item.title}}
+          <view 
+            a:for="{{height}}">
+            ........根据内容自适应高度........
+          </view>
+      </view>
+    </tab-content>
+  </block>
+</tabs>
diff --git a/demo/pages/TabsFallback/index.js b/demo/pages/TabsFallback/index.js
@@ -0,0 +1,81 @@
+const component2 = my.canIUse('component2');
+
+Page({
+  data: {
+    curIdx: 2,
+    height: 30,
+    type: 'basis',
+    animation: false,
+    swipeable: false,
+    titleSlot: false,
+    plusSlot: true,
+    sticky: false,
+    tabs: [
+      {
+        title: '选项一',
+        subTitle: '描述文案',
+        corner: true,
+      },
+      {
+        title: '选项二',
+        subTitle: '描述文案描述',
+      },
+      {
+        title: '选项三',
+        subTitle: '描述',
+      },
+    ],
+    tabsType: [
+      { name: 'basis', value: '普通', checked: true },
+      { name: 'capsule', value: '胶囊' },
+      { name: 'mixin', value: '带描述' },
+    ],
+    tabsNumber: [
+      { name: '1', value: '一条' },
+      { name: '2', value: '两条' },
+      { name: '3', value: '三条' },
+      { name: '-1', value: '很多', checked: true },
+    ],
+    tabsAnimation: [
+      { name: true, value: 'true' },
+      { name: false, value: 'false', checked: true },
+    ],
+    tabsSwipeable: [
+      { name: true, value: 'true' },
+      { name: false, value: 'false', checked: true },
+    ],
+    tabsTitleSlotScope: [
+      { name: true, value: 'true' },
+      { name: false, value: 'false', checked: true },
+    ],
+    tabsSticky: [
+      { name: true, value: 'true' },
+      { name: false, value: 'false', checked: true },
+    ],
+    tabsPlusSlotScope: [
+      { name: true, value: 'true', checked: true },
+      { name: false, value: 'false' },
+    ],
+    canSwipe: true,
+  },
+  onLoad() {
+    if (!component2) {
+      this.setData({
+        canSwipe: component2,
+      });
+    }
+  },
+  // tabs 的点击回调
+  changeTab(e) {
+    this.setData({
+      curIdx: e,
+    });
+  },
+  // 右上角的 plus 区域点击事件
+  iconClick() {
+    my.alert({
+      title: 'slot="plus"',
+      content: '自定义 slot 的 icon 被点击',
+    });
+  },
+});
diff --git a/demo/pages/TabsFallback/index.json b/demo/pages/TabsFallback/index.json
@@ -0,0 +1,9 @@
+{
+    "defaultTitle": "Tabs",
+    "usingComponents": {
+      "tabs": "../../../src/Tabs/index",
+      "tab-content": "../../../src/Tabs/TabItem/index",
+      "icon": "../../../src/Icon/index"
+    }
+  }
+
diff --git a/demo/pages/TabsSticky/index.acss b/demo/pages/TabsSticky/index.acss
diff --git a/demo/pages/TabsSticky/index.axml b/demo/pages/TabsSticky/index.axml
@@ -0,0 +1,31 @@
+
+<view style="height:200px; z-index:999;background-color:red">
+dd
+</view>
+<tabs 
+  index="{{index}}" 
+  type="basic" 
+  swipeable="{{true}}" 
+  sticky="{{true}}"
+  stickyTop="50px"
+  onChange="changeTab">
+  <block a:for="{{tabs}}">
+    <tab-content 
+      tab="{{item}}">
+      <view>
+      {{index}}
+          <view 
+            a:for="{{200}}">
+            ........根据内容自适应高度........
+          </view>
+      </view>
+    </tab-content>
+  </block>
+</tabs>
+
+
+<text 
+  a:if="{{!canSwipe}}" 
+  class="tips">
+  当前未开启 component2 编译，无法使用 swipeable 属性。
+</text>
diff --git a/demo/pages/TabsSticky/index.js b/demo/pages/TabsSticky/index.js
@@ -0,0 +1,201 @@
+const component2 = my.canIUse('component2');
+
+Page({
+  data: {
+    index: 0,
+    type: 'basis',
+    animation: false,
+    swipeable: false,
+    titleSlot: false,
+    plusSlot: true,
+    sticky: false,
+    tabs: [
+      {
+        title: '选项一',
+        subTitle: '描述文案',
+        corner: true,
+      },
+      {
+        title: '选项二',
+        subTitle: '描述文案描述',
+      }
+    ],
+    canSwipe: true,
+  },
+  onLoad() {
+    if (!component2) {
+      this.setData({
+        canSwipe: component2,
+      });
+    }
+  },
+  // 【配置】tabs 选项卡条数修改
+  tabsNumberChange(e) {
+    if (e.detail.value === '1') {
+      this.setData({
+        tabs: [
+          {
+            title: '选项',
+            subTitle: '描述文案',
+            badge: 6,
+          },
+        ],
+      });
+    } else if (e.detail.value === '2') {
+      this.setData({
+        tabs: [
+          {
+            title: '选项',
+            subTitle: '描述文案',
+          },
+          {
+            title: '选项二',
+            subTitle: '描述文案描述',
+          },
+        ],
+      });
+    } else if (e.detail.value === '3') {
+      this.setData({
+        tabs: [
+          {
+            title: '选项一',
+            subTitle: '描述文案',
+          },
+          {
+            title: '选项二',
+            subTitle: '描述文案描述',
+          },
+          {
+            title: '选项三',
+            subTitle: '描述',
+          },
+        ],
+      });
+    } else {
+      this.setData({
+        tabs: [
+          {
+            title: '选项一',
+            subTitle: '描述文案',
+          },
+          {
+            title: '选项二',
+            subTitle: '描述文案描述',
+          },
+          {
+            title: '选项三',
+            subTitle: '描述',
+          },
+          {
+            title: '4 Tab',
+            subTitle: '描述',
+            showBadge: true,
+            badge: 0,
+          },
+          {
+            title: '5 Tab',
+            subTitle: '描述描述',
+            badge: 999,
+          },
+          {
+            title: '3 Tab',
+            subTitle: '描述',
+          },
+          {
+            title: '4 Tab',
+            subTitle: '描述',
+          },
+          {
+            title: '151111 Tab',
+            subTitle: '描述',
+          },
+          {
+            title: '42345 Tab',
+            subTitle: '描述',
+          },
+          {
+            title: '1511116787 Tab',
+            subTitle: '描述',
+          },
+          {
+            title: '42452 Tab',
+            subTitle: '描述',
+          },
+          {
+            title: '15451111 Tab',
+          },
+          {
+            title: '4234 Tab',
+            subTitle: '描述',
+          },
+          {
+            title: '11251111 Tab',
+            subTitle: '描述',
+          },
+          {
+            title: '44123 Tab',
+          },
+          {
+            title: '1531111 Tab',
+            subTitle: '描述',
+          },
+          {
+            title: '41 Tab',
+          },
+          {
+            title: '15111111 Tab',
+          },
+        ],
+      });
+    }
+  },
+  // 【配置】type 类型选择
+  tabsTypeChange(e) {
+    this.setData({
+      type: e.detail.value,
+    });
+  },
+  // 【配置】animation 类型的选择
+  tabsAnimationChange(e) {
+    this.setData({
+      animation: e.detail.value,
+    });
+  },
+  // 【配置】swipeable 类型的选择
+  tabsSwipeableChange(e) {
+    this.setData({
+      swipeable: e.detail.value,
+    });
+  },
+  // 【配置】titleSlot 类型的选择
+  tabsTitleSlotScopeChange(e) {
+    this.setData({
+      titleSlot: e.detail.value,
+    });
+  },
+  // 【配置】plusSlot 类型的选择
+  tabsPlusSlotScopeChange(e) {
+    this.setData({
+      plusSlot: e.detail.value,
+    });
+  },
+  // 【配置】sticky 类型的选择
+  tabsStickyChange(e) {
+    this.setData({
+      sticky: e.detail.value,
+    });
+  },
+  // tabs 的点击回调
+  changeTab(e) {
+    this.setData({
+      index: e,
+    });
+  },
+  // 右上角的 plus 区域点击事件
+  iconClick() {
+    my.alert({
+      title: 'slot="plus"',
+      content: '自定义 slot 的 icon 被点击',
+    });
+  },
+});
diff --git a/demo/pages/TabsSticky/index.json b/demo/pages/TabsSticky/index.json
@@ -0,0 +1,8 @@
+{
+    "defaultTitle": "Tabs",
+    "usingComponents": {
+      "tabs": "../../../src/Tabs/index",
+      "tab-content": "../../../src/Tabs/TabItem/index",
+      "icon": "../../../src/Icon/index"
+    }
+  }