Feat/swipe actipn case (#446)

* feat: 调整swipe-action示例 * feat: 初始化swipe-action * feat: 增加swipe-action实例 * feat: 新增示例 * feat: 新增swipe-action 的示例 * feat: 修改.md 文件中的默认滑动速度 Co-authored-by: wujunwen <wujunwen.wjw@antgroup.com>
ant-design · Dec 17, 2022 · 7a94ea1 · 7a94ea1
1 parent 354e47b
commit 7a94ea1
Show file tree

Hide file tree

Showing 40 changed files with 858 additions and 223 deletions.
diff --git a/demo/app.json b/demo/app.json
@@ -2,6 +2,15 @@
   "pages": [
     "pages/index/index",
     "pages/IndexBar/index",
+    "pages/SwipeActionLeftRight/index",
+    "pages/SwipeActionMove/index",
+    "pages/SwipeActionTap/index",
+    "pages/SwipeActionSpeed/index",
+    "pages/SwipeActionWidth/index",
+    "pages/SwipeActionAnimation/index",
+    "pages/SwipeActionNumber/index",
+    "pages/SwipeActionLeft/index",
+    "pages/SwipeAction/index",
     "pages/ActionSheet/index",
     "pages/Form/index",
     "pages/FormLayout/index",
@@ -27,7 +36,6 @@
     "pages/ButtonIcon/index",
     "pages/ButtonCustom/index",
     "pages/Modal/index",
-    "pages/SwipeAction/index",
     "pages/Tabs/index",
     "pages/TabsScroll/index",
     "pages/TabsSticky/index",

diff --git a/demo/pages/SwipeAction/index.axml b/demo/pages/SwipeAction/index.axml
@@ -1,175 +1,18 @@
 <view class="t-swipe">
   <view class="t-swipe-item">
-    <view class="t-swipe-item-title">按钮在左侧-基础用法</view>
+    <view class="t-swipe-item-title">基础用法</view>
     <swipe-action
-      leftButtons="{{[set]}}"
-      elasticity="{{false}}"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        一个按钮
-      </view>
-    </swipe-action>
-    <swipe-action
-      leftButtons="{{[set, his]}}"
-      elasticity="{{false}}"
-      damping="20"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        两个按钮-设置弹性速度
-      </view>
-    </swipe-action>
-    <swipe-action
-      leftButtons="{{[set, his, del]}}"
-      elasticity="{{true}}"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        三个按钮-弹性动画
-      </view>
-    </swipe-action>
-    <view class="t-swipe-item-title">按钮在右侧-基础用法</view>
-    <swipe-action
-      rightButtons="{{[set]}}"
-      elasticity="{{false}}"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        一个按钮
-      </view>
-    </swipe-action>
-    <swipe-action
-      rightButtons="{{[set, his]}}"
-      elasticity="{{false}}"
-      damping="20"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        两个按钮-设置弹性速度
-      </view>
-    </swipe-action>
-    <swipe-action
-      rightButtons="{{[set, his, del]}}"
-      elasticity="{{true}}"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        三个按钮-弹性动画
-      </view>
-    </swipe-action>
-    <view class="t-swipe-item-title">按钮在右侧-点击二次确认-弹性动画</view>
-    <swipe-action
-      rightButtons="{{[{...setTap, width: 330}]}}"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        一个按钮-自定义按钮宽度
-      </view>
-    </swipe-action>
-    <swipe-action
-      rightButtons="{{[setTap, {...hisTap, width: 200}]}}"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        两个按钮-自定义按钮宽度
-      </view>
-    </swipe-action>
-    <swipe-action
-      rightButtons="{{[setTap, hisTap, {...delTap, width: 120}]}}"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        三个按钮-自定义按钮宽度
-      </view>
-    </swipe-action>
-    <view class="t-swipe-item-title">按钮在右侧-滑动二次确认-弹性动画</view>
-    <swipe-action
-      rightButtons="{{[{...setTap, confirmType: 'move', width: 340}]}}"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        一个按钮-自定义按钮宽度
-      </view>
-    </swipe-action>
-    <swipe-action
-      rightButtons="{{[{...setTap, confirmType: 'move'}, hisTap]}}"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        两个按钮(限制:仅一个按钮可设置滑动确认)
-      </view>
-    </swipe-action>
-    <swipe-action
-      rightButtons="{{[setTap, hisTap, moveTap]}}"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        三个按钮(限制:仅一个按钮可设置滑动确认)
-      </view>
-    </swipe-action>
-    <view class="t-swipe-item-title">左右测都有按钮(限制: 两侧所有按钮宽度相加需要相等)</view>
-    <swipe-action
-      leftButtons="{{[set]}}"
-      rightButtons="{{[set]}}"
-      elasticity="{{false}}"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        一个按钮
-      </view>
-    </swipe-action>
-    <swipe-action
-      leftButtons="{{[set, his]}}"
-      rightButtons="{{[set, his]}}"
-      elasticity="{{false}}"
-      damping="20"
-      onSwipeEnd="onSwipeEnd"
-      onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
-      >
-      <view class="t-swipe-item-con">
-        两个按钮-设置弹性速度
-      </view>
-    </swipe-action>
-    <swipe-action
-      leftButtons="{{[set, his, del]}}"
-      rightButtons="{{[set, his, del]}}"
+      a:for="{{ 10 }}"
+      data-item="{{{ index }}}"
+      rightButtons="{{ rightBtns }}"
       elasticity="{{true}}"
+      swiped="{{ swipeIndex === index }}"
       onSwipeEnd="onSwipeEnd"
       onSwipeStart="onSwipeStart"
-      onButtonTap="onButtonTap"
       >
       <view class="t-swipe-item-con">
-        三个按钮-弹性动画
+        右侧-三个按钮
       </view>
     </swipe-action>
-    <view class="safe-view"></view>
   </view>
 </view>
diff --git a/demo/pages/SwipeAction/index.js b/demo/pages/SwipeAction/index.js
@@ -1,50 +1,29 @@
 Page({
   data: {
-    set: {
-      text: '设为常用',
-      bgColor: '#1677FF',
-      color: '#fff',
-    },
-    del: {
-      text: '删除',
-      bgColor: '#FF2B00',
-      color: '#fff',
-    },
-    his: {
-      text: '往来记录',
-      bgColor: '#FFA91B',
-      color: '#fff',
-    },
-    setTap: {
-      text: '设为常用',
-      bgColor: '#1677FF',
-      color: '#fff',
-      confirmType: 'tap',
-      confirmText: '确认设为常用吗?'
-    },
-    delTap: {
-      text: '删除',
-      bgColor: '#FF2B00',
-      color: '#fff',
-      confirmType: 'tap',
-      confirmText: '确认删除吗?'
-    },
-    hisTap: {
-      text: '往来记录',
-      bgColor: '#FFA91B',
-      color: '#fff',
-      confirmType: 'tap',
-      confirmText: '确认往来记录吗?'
-    },
-    moveTap: {
-      text: '删除',
-      bgColor: '#FF2B00',
-      color: '#fff',
-      confirmType: 'move',
-      confirmText: '确认删除吗?'
-    }
+    rightBtns: [
+      {
+        text: '设为常用',
+        bgColor: '#1677FF',
+        color: '#fff',
+      },
+      {
+        text: '删除',
+        bgColor: '#FF2B00',
+        color: '#fff',
+      },
+      {
+        text: '往来记录',
+        bgColor: '#FFA91B',
+        color: '#fff',
+      },
+    ],
+    swipeIndex: -1
+  },
+  onSwipeStart() {
+    this.setData({ swipeIndex: '' });
+  },
+  onSwipeEnd(e, data) {
+    const { index } = e.target.dataset.item;
+    data.swiped && this.setData({ swipeIndex: index });
   },
-  onSwipeStart() {},
-  onSwipeEnd() {},
-  onButtonTap() {},
 });
diff --git a/demo/pages/SwipeAction/index.less b/demo/pages/SwipeAction/index.less
@@ -6,8 +6,8 @@
   margin: 0 auto;
   background-color: @COLOR_BACKGROUND;
   &-item {
-    height: 110 * @rpx;
-    line-height: 110 * @rpx;
+    height: 130 * @rpx;
+    line-height: 130 * @rpx;
     font-size: 32 * @rpx;
     color: @COLOR_TEXT_PRIMARY;
     &-title {
@@ -38,8 +38,4 @@
       }
     }
   }
-  .safe-view {
-    width: 100%;
-    height: 100 * @rpx;
-  }
 }
diff --git a/demo/pages/SwipeActionAnimation/index.axml b/demo/pages/SwipeActionAnimation/index.axml
@@ -0,0 +1,18 @@
+<view class="t-swipe">
+  <view class="t-swipe-item">
+    <view class="t-swipe-item-title">去除松开手之后的滑动回弹效果</view>
+    <swipe-action
+      a:for="{{ 10 }}"
+      data-item="{{{ index }}}"
+      rightButtons="{{ rightBtns }}"
+      elasticity="{{false}}"
+      swiped="{{ swipeIndex === index }}"
+      onSwipeEnd="onSwipeEnd"
+      onSwipeStart="onSwipeStart"
+      >
+      <view class="t-swipe-item-con">
+        右侧-三个按钮
+      </view>
+    </swipe-action>
+  </view>
+</view>
diff --git a/demo/pages/SwipeActionAnimation/index.js b/demo/pages/SwipeActionAnimation/index.js
@@ -0,0 +1,29 @@
+Page({
+  data: {
+    rightBtns: [
+      {
+        text: '设为常用',
+        bgColor: '#1677FF',
+        color: '#fff',
+      },
+      {
+        text: '往来记录',
+        bgColor: '#FFA91B',
+        color: '#fff',
+      },
+      {
+        text: '删除',
+        bgColor: '#FF2B00',
+        color: '#fff',
+      },
+    ],
+    swipeIndex: -1
+  },
+  onSwipeStart() {
+    this.setData({ swipeIndex: '' });
+  },
+  onSwipeEnd(e, data) {
+    const { index } = e.target.dataset.item;
+    data.swiped && this.setData({ swipeIndex: index });
+  },
+});
diff --git a/demo/pages/SwipeActionAnimation/index.json b/demo/pages/SwipeActionAnimation/index.json
@@ -0,0 +1,9 @@
+{
+    "defaultTitle": "Swipe-Action",
+    "pullRefresh": "NO",
+    "showProgress": "NO",
+    "allowsBounceVertical": "NO",
+    "usingComponents": {
+      "swipe-action": "../../../src/SwipeAction/index"
+    }
+  }