From e7f3bfe97b890a92a4cb5771574fe4b4758366d0 Mon Sep 17 00:00:00 2001 From: wujunwen Date: Mon, 12 Dec 2022 14:16:32 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4swipe-action?= =?UTF-8?q?=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/app.json | 2 +- demo/pages/SwipeAction/index.axml | 96 ++++++++++--------------------- 2 files changed, 31 insertions(+), 67 deletions(-) diff --git a/demo/app.json b/demo/app.json index 3f1ecd7f3..406400c9e 100644 --- a/demo/app.json +++ b/demo/app.json @@ -1,5 +1,6 @@ { "pages": [ + "pages/SwipeAction/index", "pages/index/index", "pages/ActionSheet/index", "pages/Form/index", @@ -25,7 +26,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 index 16baae3a5..0b9e03ba2 100644 --- a/demo/pages/SwipeAction/index.axml +++ b/demo/pages/SwipeAction/index.axml @@ -1,31 +1,8 @@ - 按钮在左侧-基础用法 + 基础用法 - - 一个按钮 - - - - - 两个按钮-设置弹性速度 - - - - 按钮在右侧-基础用法 - - 一个按钮 - - - - 两个按钮-设置弹性速度 + 三个按钮-弹性动画 - 按钮在右侧-点击二次确认-弹性动画 - 一个按钮-自定义按钮宽度 + 三个按钮-弹性动画 - 两个按钮-自定义按钮宽度 + 三个按钮-弹性动画 - 三个按钮-自定义按钮宽度 + 三个按钮-弹性动画 - 按钮在右侧-滑动二次确认-弹性动画 - 一个按钮-自定义按钮宽度 + 三个按钮-弹性动画 - 两个按钮(限制:仅一个按钮可设置滑动确认) + 三个按钮-弹性动画 - 三个按钮(限制:仅一个按钮可设置滑动确认) + 三个按钮-弹性动画 - 左右测都有按钮(限制: 两侧所有按钮宽度相加需要相等) - 一个按钮 + 三个按钮-弹性动画 - 两个按钮-设置弹性速度 + 三个按钮-弹性动画 + \ No newline at end of file From df69d77bdf00c8b28f158b0aa32234626988dd5a Mon Sep 17 00:00:00 2001 From: wujunwen Date: Mon, 12 Dec 2022 17:44:20 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96swipe-ac?= =?UTF-8?q?tion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/pages/SwipeAction/index.axml | 129 +----------------------------- demo/pages/SwipeAction/index.js | 71 ++++++---------- demo/pages/SwipeAction/index.less | 8 +- src/SwipeAction/index.ts | 6 +- src/SwipeAction/props.d.ts | 2 +- src/SwipeAction/props.js | 2 +- 6 files changed, 36 insertions(+), 182 deletions(-) diff --git a/demo/pages/SwipeAction/index.axml b/demo/pages/SwipeAction/index.axml index 0b9e03ba2..80a099fee 100644 --- a/demo/pages/SwipeAction/index.axml +++ b/demo/pages/SwipeAction/index.axml @@ -2,138 +2,17 @@ 基础用法 三个按钮-弹性动画 - - - 三个按钮-弹性动画 - - - - - 三个按钮-弹性动画 - - - - - 三个按钮-弹性动画 - - - - - 三个按钮-弹性动画 - - - - - 三个按钮-弹性动画 - - - - - 三个按钮-弹性动画 - - - - - 三个按钮-弹性动画 - - - - - 三个按钮-弹性动画 - - - - - 三个按钮-弹性动画 - - - - - 三个按钮-弹性动画 - - - - - 三个按钮-弹性动画 - - - - \ No newline at end of file diff --git a/demo/pages/SwipeAction/index.js b/demo/pages/SwipeAction/index.js index 744d20b2a..a5750b076 100644 --- 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() {}, }); \ No newline at end of file diff --git a/demo/pages/SwipeAction/index.less b/demo/pages/SwipeAction/index.less index 5b5c06ddb..97c75db9e 100644 --- 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/src/SwipeAction/index.ts b/src/SwipeAction/index.ts index f7f2f45f7..eaf2fcbbf 100644 --- a/src/SwipeAction/index.ts +++ b/src/SwipeAction/index.ts @@ -67,7 +67,7 @@ Component({ didUpdate(prevProp) { const { swiped, damping, elasticity } = this.props; // 设置不同的滑动位置时需要重置 - const rs = prevProp.swiped !== swiped; + const rs = prevProp.swiped !== swiped && !swiped; const is = prevProp.elasticity !== elasticity; const ds = prevProp.damping !== damping; if (rs || is || ds) { @@ -263,7 +263,7 @@ Component({ onSwipeEnd(fmtEvent(this.props), { direction: 'left', swiped: !!isRight }); }, ); - }, inertiaWidth > 0 ? 200 : 0) + }, inertiaWidth > 0 ? 180 : 0) }, ); }, @@ -290,7 +290,7 @@ Component({ onSwipeEnd(fmtEvent(this.props), { direction: 'right', swiped: !!isRight }); }, ); - }, inertiaWidth > 0 ? 200 : 0); + }, inertiaWidth > 0 ? 180 : 0); }, ); }, diff --git a/src/SwipeAction/props.d.ts b/src/SwipeAction/props.d.ts index e8747a5ee..c76faae9f 100644 --- a/src/SwipeAction/props.d.ts +++ b/src/SwipeAction/props.d.ts @@ -26,7 +26,7 @@ interface ISwipeActionProps extends IBaseProps { rightButtons?: SwipeButton[]; /** * @description 滑动速度 - * @default 60 + * @default 70 */ damping?: number; /** diff --git a/src/SwipeAction/props.js b/src/SwipeAction/props.js index 509221936..c38359f32 100644 --- a/src/SwipeAction/props.js +++ b/src/SwipeAction/props.js @@ -4,7 +4,7 @@ export const SwipeActionDefaultProps = { elasticity: true, swiped: '', defaultSwiped: '', - damping: 60, + damping: 70, disable: false, onSwipeStart: (e) => {}, onSwipeEnd: (e, data) => {}, From 3cf5d8a524465b75bb91425342654f50f0091c31 Mon Sep 17 00:00:00 2001 From: wujunwen Date: Tue, 13 Dec 2022 11:10:44 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0swipe-action?= =?UTF-8?q?=E5=AE=9E=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/pages/SwipeActionLeft/index.axml | 18 ++++++++++++ demo/pages/SwipeActionLeft/index.json | 9 ++++++ demo/pages/SwipeActionLeft/index.less | 41 +++++++++++++++++++++++++++ demo/pages/SwipeActionLeft/index.ts | 29 +++++++++++++++++++ 4 files changed, 97 insertions(+) create mode 100644 demo/pages/SwipeActionLeft/index.axml create mode 100644 demo/pages/SwipeActionLeft/index.json create mode 100644 demo/pages/SwipeActionLeft/index.less create mode 100644 demo/pages/SwipeActionLeft/index.ts diff --git a/demo/pages/SwipeActionLeft/index.axml b/demo/pages/SwipeActionLeft/index.axml new file mode 100644 index 000000000..23a0f26f9 --- /dev/null +++ b/demo/pages/SwipeActionLeft/index.axml @@ -0,0 +1,18 @@ + + + 左侧按钮 + + + 左侧-三个按钮 + + + + \ No newline at end of file diff --git a/demo/pages/SwipeActionLeft/index.json b/demo/pages/SwipeActionLeft/index.json new file mode 100644 index 000000000..57c35121e --- /dev/null +++ b/demo/pages/SwipeActionLeft/index.json @@ -0,0 +1,9 @@ +{ + "defaultTitle": "Swipe-Action", + "pullRefresh": "NO", + "showProgress": "NO", + "allowsBounceVertical": "NO", + "usingComponents": { + "swipe-action": "../../../src/SwipeAction/index" + } +} \ No newline at end of file diff --git a/demo/pages/SwipeActionLeft/index.less b/demo/pages/SwipeActionLeft/index.less new file mode 100644 index 000000000..97c75db9e --- /dev/null +++ b/demo/pages/SwipeActionLeft/index.less @@ -0,0 +1,41 @@ +@import "../../../src/style/themes/color.less"; +@import (reference) "../../../src/_base/index.less"; + +.t-swipe { + width: 100%; + margin: 0 auto; + background-color: @COLOR_BACKGROUND; + &-item { + height: 130 * @rpx; + line-height: 130 * @rpx; + font-size: 32 * @rpx; + color: @COLOR_TEXT_PRIMARY; + &-title { + width: 100%; + height: 90 * @rpx; + line-height: 100 * @rpx; + font-size: 28 * @rpx; + color: @COLOR_TEXT_ASSIST_DEFAULT; + text-indent: 1em; + } + &-con { + background-color: @COLOR_CARD; + text-indent: 1em; + position: relative; + height: 100%; + color: @COLOR_TEXT_PRIMARY; + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + max-height: 1px; + min-height: 1px; + transform: scaleY(0.5); + background-color: @COLOR_BORDER; + } + } + } +} diff --git a/demo/pages/SwipeActionLeft/index.ts b/demo/pages/SwipeActionLeft/index.ts new file mode 100644 index 000000000..ece07418c --- /dev/null +++ b/demo/pages/SwipeActionLeft/index.ts @@ -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 }); + }, +}); \ No newline at end of file From 07e49c0cc44b560f640993d936ceb0774d915231 Mon Sep 17 00:00:00 2001 From: wujunwen Date: Fri, 16 Dec 2022 20:18:54 +0800 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/app.json | 2 + demo/pages/SwipeAction/index.axml | 2 +- demo/pages/SwipeActionAnimation/index.axml | 19 +++++++++ demo/pages/SwipeActionAnimation/index.js | 29 +++++++++++++ demo/pages/SwipeActionAnimation/index.json | 9 ++++ demo/pages/SwipeActionAnimation/index.less | 41 +++++++++++++++++++ .../SwipeActionLeft/{index.ts => index.js} | 0 demo/pages/SwipeActionNumber/index.axml | 18 ++++++++ demo/pages/SwipeActionNumber/index.js | 29 +++++++++++++ demo/pages/SwipeActionNumber/index.json | 9 ++++ demo/pages/SwipeActionNumber/index.less | 41 +++++++++++++++++++ src/SwipeAction/index.md | 9 ++++ 12 files changed, 207 insertions(+), 1 deletion(-) create mode 100644 demo/pages/SwipeActionAnimation/index.axml create mode 100644 demo/pages/SwipeActionAnimation/index.js create mode 100644 demo/pages/SwipeActionAnimation/index.json create mode 100644 demo/pages/SwipeActionAnimation/index.less rename demo/pages/SwipeActionLeft/{index.ts => index.js} (100%) create mode 100644 demo/pages/SwipeActionNumber/index.axml create mode 100644 demo/pages/SwipeActionNumber/index.js create mode 100644 demo/pages/SwipeActionNumber/index.json create mode 100644 demo/pages/SwipeActionNumber/index.less diff --git a/demo/app.json b/demo/app.json index 406400c9e..b8e1e36f2 100644 --- a/demo/app.json +++ b/demo/app.json @@ -1,5 +1,7 @@ { "pages": [ + "pages/SwipeActionNumber/index", + "pages/SwipeActionLeft/index", "pages/SwipeAction/index", "pages/index/index", "pages/ActionSheet/index", diff --git a/demo/pages/SwipeAction/index.axml b/demo/pages/SwipeAction/index.axml index 80a099fee..95852ffa5 100644 --- a/demo/pages/SwipeAction/index.axml +++ b/demo/pages/SwipeAction/index.axml @@ -11,7 +11,7 @@ onSwipeStart="onSwipeStart" > - 三个按钮-弹性动画 + 右侧-三个按钮 diff --git a/demo/pages/SwipeActionAnimation/index.axml b/demo/pages/SwipeActionAnimation/index.axml new file mode 100644 index 000000000..bb822b153 --- /dev/null +++ b/demo/pages/SwipeActionAnimation/index.axml @@ -0,0 +1,19 @@ + + + 基础用法 + + + 右侧-三个按钮 + + + + \ No newline at end of file diff --git a/demo/pages/SwipeActionAnimation/index.js b/demo/pages/SwipeActionAnimation/index.js new file mode 100644 index 000000000..a5750b076 --- /dev/null +++ b/demo/pages/SwipeActionAnimation/index.js @@ -0,0 +1,29 @@ +Page({ + data: { + 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 }); + }, +}); \ No newline at end of file diff --git a/demo/pages/SwipeActionAnimation/index.json b/demo/pages/SwipeActionAnimation/index.json new file mode 100644 index 000000000..6c5b17a82 --- /dev/null +++ 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" + } + } \ No newline at end of file diff --git a/demo/pages/SwipeActionAnimation/index.less b/demo/pages/SwipeActionAnimation/index.less new file mode 100644 index 000000000..97c75db9e --- /dev/null +++ b/demo/pages/SwipeActionAnimation/index.less @@ -0,0 +1,41 @@ +@import "../../../src/style/themes/color.less"; +@import (reference) "../../../src/_base/index.less"; + +.t-swipe { + width: 100%; + margin: 0 auto; + background-color: @COLOR_BACKGROUND; + &-item { + height: 130 * @rpx; + line-height: 130 * @rpx; + font-size: 32 * @rpx; + color: @COLOR_TEXT_PRIMARY; + &-title { + width: 100%; + height: 90 * @rpx; + line-height: 100 * @rpx; + font-size: 28 * @rpx; + color: @COLOR_TEXT_ASSIST_DEFAULT; + text-indent: 1em; + } + &-con { + background-color: @COLOR_CARD; + text-indent: 1em; + position: relative; + height: 100%; + color: @COLOR_TEXT_PRIMARY; + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + max-height: 1px; + min-height: 1px; + transform: scaleY(0.5); + background-color: @COLOR_BORDER; + } + } + } +} diff --git a/demo/pages/SwipeActionLeft/index.ts b/demo/pages/SwipeActionLeft/index.js similarity index 100% rename from demo/pages/SwipeActionLeft/index.ts rename to demo/pages/SwipeActionLeft/index.js diff --git a/demo/pages/SwipeActionNumber/index.axml b/demo/pages/SwipeActionNumber/index.axml new file mode 100644 index 000000000..47727e5a6 --- /dev/null +++ b/demo/pages/SwipeActionNumber/index.axml @@ -0,0 +1,18 @@ + + + 基础用法 + + + 右侧-{{`${index + 1 > 3 ? 3 : index + 1}个按钮`}} + + + + \ No newline at end of file diff --git a/demo/pages/SwipeActionNumber/index.js b/demo/pages/SwipeActionNumber/index.js new file mode 100644 index 000000000..a5750b076 --- /dev/null +++ b/demo/pages/SwipeActionNumber/index.js @@ -0,0 +1,29 @@ +Page({ + data: { + 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 }); + }, +}); \ No newline at end of file diff --git a/demo/pages/SwipeActionNumber/index.json b/demo/pages/SwipeActionNumber/index.json new file mode 100644 index 000000000..6c5b17a82 --- /dev/null +++ b/demo/pages/SwipeActionNumber/index.json @@ -0,0 +1,9 @@ +{ + "defaultTitle": "Swipe-Action", + "pullRefresh": "NO", + "showProgress": "NO", + "allowsBounceVertical": "NO", + "usingComponents": { + "swipe-action": "../../../src/SwipeAction/index" + } + } \ No newline at end of file diff --git a/demo/pages/SwipeActionNumber/index.less b/demo/pages/SwipeActionNumber/index.less new file mode 100644 index 000000000..97c75db9e --- /dev/null +++ b/demo/pages/SwipeActionNumber/index.less @@ -0,0 +1,41 @@ +@import "../../../src/style/themes/color.less"; +@import (reference) "../../../src/_base/index.less"; + +.t-swipe { + width: 100%; + margin: 0 auto; + background-color: @COLOR_BACKGROUND; + &-item { + height: 130 * @rpx; + line-height: 130 * @rpx; + font-size: 32 * @rpx; + color: @COLOR_TEXT_PRIMARY; + &-title { + width: 100%; + height: 90 * @rpx; + line-height: 100 * @rpx; + font-size: 28 * @rpx; + color: @COLOR_TEXT_ASSIST_DEFAULT; + text-indent: 1em; + } + &-con { + background-color: @COLOR_CARD; + text-indent: 1em; + position: relative; + height: 100%; + color: @COLOR_TEXT_PRIMARY; + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + max-height: 1px; + min-height: 1px; + transform: scaleY(0.5); + background-color: @COLOR_BORDER; + } + } + } +} diff --git a/src/SwipeAction/index.md b/src/SwipeAction/index.md index ce668d172..6c08abd44 100644 --- a/src/SwipeAction/index.md +++ b/src/SwipeAction/index.md @@ -14,8 +14,17 @@ toc: 'content' ## 代码示例 +### 基础用法 +### 按钮在左侧 + + +### 改变按钮数量 + + +### 禁用滑动弹性 + ## Tip 1. 该组件父级容器必须设置width和height。 From 88a9ed6e2f6fe324855d8fb9eb38344ddffc3fb3 Mon Sep 17 00:00:00 2001 From: wujunwen Date: Fri, 16 Dec 2022 21:26:02 +0800 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Eswipe-action=20?= =?UTF-8?q?=E7=9A=84=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/app.json | 8 ++++- demo/pages/SwipeActionAnimation/index.axml | 3 +- demo/pages/SwipeActionAnimation/index.js | 8 ++--- demo/pages/SwipeActionLeft/index.axml | 2 +- demo/pages/SwipeActionLeftRight/index.axml | 19 ++++++++++ demo/pages/SwipeActionLeftRight/index.js | 29 +++++++++++++++ demo/pages/SwipeActionLeftRight/index.json | 9 +++++ demo/pages/SwipeActionLeftRight/index.less | 41 ++++++++++++++++++++++ demo/pages/SwipeActionMove/index.axml | 18 ++++++++++ demo/pages/SwipeActionMove/index.js | 31 ++++++++++++++++ demo/pages/SwipeActionMove/index.json | 9 +++++ demo/pages/SwipeActionMove/index.less | 41 ++++++++++++++++++++++ demo/pages/SwipeActionNumber/index.axml | 2 +- demo/pages/SwipeActionNumber/index.js | 8 ++--- demo/pages/SwipeActionSpeed/index.axml | 19 ++++++++++ demo/pages/SwipeActionSpeed/index.js | 29 +++++++++++++++ demo/pages/SwipeActionSpeed/index.json | 9 +++++ demo/pages/SwipeActionSpeed/index.less | 41 ++++++++++++++++++++++ demo/pages/SwipeActionTap/index.axml | 18 ++++++++++ demo/pages/SwipeActionTap/index.js | 31 ++++++++++++++++ demo/pages/SwipeActionTap/index.json | 9 +++++ demo/pages/SwipeActionTap/index.less | 41 ++++++++++++++++++++++ demo/pages/SwipeActionWidth/index.axml | 18 ++++++++++ demo/pages/SwipeActionWidth/index.js | 31 ++++++++++++++++ demo/pages/SwipeActionWidth/index.json | 9 +++++ demo/pages/SwipeActionWidth/index.less | 41 ++++++++++++++++++++++ src/SwipeAction/index.md | 20 +++++++++-- 27 files changed, 529 insertions(+), 15 deletions(-) create mode 100644 demo/pages/SwipeActionLeftRight/index.axml create mode 100644 demo/pages/SwipeActionLeftRight/index.js create mode 100644 demo/pages/SwipeActionLeftRight/index.json create mode 100644 demo/pages/SwipeActionLeftRight/index.less create mode 100644 demo/pages/SwipeActionMove/index.axml create mode 100644 demo/pages/SwipeActionMove/index.js create mode 100644 demo/pages/SwipeActionMove/index.json create mode 100644 demo/pages/SwipeActionMove/index.less create mode 100644 demo/pages/SwipeActionSpeed/index.axml create mode 100644 demo/pages/SwipeActionSpeed/index.js create mode 100644 demo/pages/SwipeActionSpeed/index.json create mode 100644 demo/pages/SwipeActionSpeed/index.less create mode 100644 demo/pages/SwipeActionTap/index.axml create mode 100644 demo/pages/SwipeActionTap/index.js create mode 100644 demo/pages/SwipeActionTap/index.json create mode 100644 demo/pages/SwipeActionTap/index.less create mode 100644 demo/pages/SwipeActionWidth/index.axml create mode 100644 demo/pages/SwipeActionWidth/index.js create mode 100644 demo/pages/SwipeActionWidth/index.json create mode 100644 demo/pages/SwipeActionWidth/index.less diff --git a/demo/app.json b/demo/app.json index b8e1e36f2..58b3c53db 100644 --- a/demo/app.json +++ b/demo/app.json @@ -1,9 +1,15 @@ { "pages": [ + "pages/index/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/index/index", "pages/ActionSheet/index", "pages/Form/index", "pages/FormLayout/index", diff --git a/demo/pages/SwipeActionAnimation/index.axml b/demo/pages/SwipeActionAnimation/index.axml index bb822b153..6138c3bfd 100644 --- a/demo/pages/SwipeActionAnimation/index.axml +++ b/demo/pages/SwipeActionAnimation/index.axml @@ -1,11 +1,10 @@ - 基础用法 + 去除松开手之后的滑动回弹效果 - 左侧按钮 + 按钮在左侧 + + 左右两侧都有按钮 + + + 三个按钮 + + + + \ No newline at end of file diff --git a/demo/pages/SwipeActionLeftRight/index.js b/demo/pages/SwipeActionLeftRight/index.js new file mode 100644 index 000000000..ece07418c --- /dev/null +++ b/demo/pages/SwipeActionLeftRight/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 }); + }, +}); \ No newline at end of file diff --git a/demo/pages/SwipeActionLeftRight/index.json b/demo/pages/SwipeActionLeftRight/index.json new file mode 100644 index 000000000..57c35121e --- /dev/null +++ b/demo/pages/SwipeActionLeftRight/index.json @@ -0,0 +1,9 @@ +{ + "defaultTitle": "Swipe-Action", + "pullRefresh": "NO", + "showProgress": "NO", + "allowsBounceVertical": "NO", + "usingComponents": { + "swipe-action": "../../../src/SwipeAction/index" + } +} \ No newline at end of file diff --git a/demo/pages/SwipeActionLeftRight/index.less b/demo/pages/SwipeActionLeftRight/index.less new file mode 100644 index 000000000..97c75db9e --- /dev/null +++ b/demo/pages/SwipeActionLeftRight/index.less @@ -0,0 +1,41 @@ +@import "../../../src/style/themes/color.less"; +@import (reference) "../../../src/_base/index.less"; + +.t-swipe { + width: 100%; + margin: 0 auto; + background-color: @COLOR_BACKGROUND; + &-item { + height: 130 * @rpx; + line-height: 130 * @rpx; + font-size: 32 * @rpx; + color: @COLOR_TEXT_PRIMARY; + &-title { + width: 100%; + height: 90 * @rpx; + line-height: 100 * @rpx; + font-size: 28 * @rpx; + color: @COLOR_TEXT_ASSIST_DEFAULT; + text-indent: 1em; + } + &-con { + background-color: @COLOR_CARD; + text-indent: 1em; + position: relative; + height: 100%; + color: @COLOR_TEXT_PRIMARY; + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + max-height: 1px; + min-height: 1px; + transform: scaleY(0.5); + background-color: @COLOR_BORDER; + } + } + } +} diff --git a/demo/pages/SwipeActionMove/index.axml b/demo/pages/SwipeActionMove/index.axml new file mode 100644 index 000000000..25a4c10ce --- /dev/null +++ b/demo/pages/SwipeActionMove/index.axml @@ -0,0 +1,18 @@ + + + 删除按钮滑动到最大距离触发二次确认 + + + 右侧-三个按钮 + + + + \ No newline at end of file diff --git a/demo/pages/SwipeActionMove/index.js b/demo/pages/SwipeActionMove/index.js new file mode 100644 index 000000000..ab798f3ea --- /dev/null +++ b/demo/pages/SwipeActionMove/index.js @@ -0,0 +1,31 @@ +Page({ + data: { + rightBtns: [ + { + text: '设为常用', + bgColor: '#1677FF', + color: '#fff', + }, + { + text: '往来记录', + bgColor: '#FFA91B', + color: '#fff', + }, + { + text: '删除', + bgColor: '#FF2B00', + color: '#fff', + confirmType: 'move', + confirmText: '确认删除吗?', + }, + ], + swipeIndex: -1 + }, + onSwipeStart() { + this.setData({ swipeIndex: '' }); + }, + onSwipeEnd(e, data) { + const { index } = e.target.dataset.item; + data.swiped && this.setData({ swipeIndex: index }); + }, +}); \ No newline at end of file diff --git a/demo/pages/SwipeActionMove/index.json b/demo/pages/SwipeActionMove/index.json new file mode 100644 index 000000000..6c5b17a82 --- /dev/null +++ b/demo/pages/SwipeActionMove/index.json @@ -0,0 +1,9 @@ +{ + "defaultTitle": "Swipe-Action", + "pullRefresh": "NO", + "showProgress": "NO", + "allowsBounceVertical": "NO", + "usingComponents": { + "swipe-action": "../../../src/SwipeAction/index" + } + } \ No newline at end of file diff --git a/demo/pages/SwipeActionMove/index.less b/demo/pages/SwipeActionMove/index.less new file mode 100644 index 000000000..97c75db9e --- /dev/null +++ b/demo/pages/SwipeActionMove/index.less @@ -0,0 +1,41 @@ +@import "../../../src/style/themes/color.less"; +@import (reference) "../../../src/_base/index.less"; + +.t-swipe { + width: 100%; + margin: 0 auto; + background-color: @COLOR_BACKGROUND; + &-item { + height: 130 * @rpx; + line-height: 130 * @rpx; + font-size: 32 * @rpx; + color: @COLOR_TEXT_PRIMARY; + &-title { + width: 100%; + height: 90 * @rpx; + line-height: 100 * @rpx; + font-size: 28 * @rpx; + color: @COLOR_TEXT_ASSIST_DEFAULT; + text-indent: 1em; + } + &-con { + background-color: @COLOR_CARD; + text-indent: 1em; + position: relative; + height: 100%; + color: @COLOR_TEXT_PRIMARY; + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + max-height: 1px; + min-height: 1px; + transform: scaleY(0.5); + background-color: @COLOR_BORDER; + } + } + } +} diff --git a/demo/pages/SwipeActionNumber/index.axml b/demo/pages/SwipeActionNumber/index.axml index 47727e5a6..02a2a4ff9 100644 --- a/demo/pages/SwipeActionNumber/index.axml +++ b/demo/pages/SwipeActionNumber/index.axml @@ -1,6 +1,6 @@ - 基础用法 + 调整按钮数量，最多为3个 + + 滑动速度变慢 + + + 右侧-三个按钮 + + + + \ No newline at end of file diff --git a/demo/pages/SwipeActionSpeed/index.js b/demo/pages/SwipeActionSpeed/index.js new file mode 100644 index 000000000..968a9851c --- /dev/null +++ b/demo/pages/SwipeActionSpeed/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 }); + }, +}); \ No newline at end of file diff --git a/demo/pages/SwipeActionSpeed/index.json b/demo/pages/SwipeActionSpeed/index.json new file mode 100644 index 000000000..6c5b17a82 --- /dev/null +++ b/demo/pages/SwipeActionSpeed/index.json @@ -0,0 +1,9 @@ +{ + "defaultTitle": "Swipe-Action", + "pullRefresh": "NO", + "showProgress": "NO", + "allowsBounceVertical": "NO", + "usingComponents": { + "swipe-action": "../../../src/SwipeAction/index" + } + } \ No newline at end of file diff --git a/demo/pages/SwipeActionSpeed/index.less b/demo/pages/SwipeActionSpeed/index.less new file mode 100644 index 000000000..97c75db9e --- /dev/null +++ b/demo/pages/SwipeActionSpeed/index.less @@ -0,0 +1,41 @@ +@import "../../../src/style/themes/color.less"; +@import (reference) "../../../src/_base/index.less"; + +.t-swipe { + width: 100%; + margin: 0 auto; + background-color: @COLOR_BACKGROUND; + &-item { + height: 130 * @rpx; + line-height: 130 * @rpx; + font-size: 32 * @rpx; + color: @COLOR_TEXT_PRIMARY; + &-title { + width: 100%; + height: 90 * @rpx; + line-height: 100 * @rpx; + font-size: 28 * @rpx; + color: @COLOR_TEXT_ASSIST_DEFAULT; + text-indent: 1em; + } + &-con { + background-color: @COLOR_CARD; + text-indent: 1em; + position: relative; + height: 100%; + color: @COLOR_TEXT_PRIMARY; + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + max-height: 1px; + min-height: 1px; + transform: scaleY(0.5); + background-color: @COLOR_BORDER; + } + } + } +} diff --git a/demo/pages/SwipeActionTap/index.axml b/demo/pages/SwipeActionTap/index.axml new file mode 100644 index 000000000..a574a74c8 --- /dev/null +++ b/demo/pages/SwipeActionTap/index.axml @@ -0,0 +1,18 @@ + + + 删除按钮点击二次确认 + + + 右侧-三个按钮 + + + + \ No newline at end of file diff --git a/demo/pages/SwipeActionTap/index.js b/demo/pages/SwipeActionTap/index.js new file mode 100644 index 000000000..77d7f3e20 --- /dev/null +++ b/demo/pages/SwipeActionTap/index.js @@ -0,0 +1,31 @@ +Page({ + data: { + rightBtns: [ + { + text: '设为常用', + bgColor: '#1677FF', + color: '#fff', + }, + { + text: '往来记录', + bgColor: '#FFA91B', + color: '#fff', + }, + { + text: '删除', + bgColor: '#FF2B00', + color: '#fff', + confirmType: 'tap', + confirmText: '确认删除吗?', + }, + ], + swipeIndex: -1 + }, + onSwipeStart() { + this.setData({ swipeIndex: '' }); + }, + onSwipeEnd(e, data) { + const { index } = e.target.dataset.item; + data.swiped && this.setData({ swipeIndex: index }); + }, +}); \ No newline at end of file diff --git a/demo/pages/SwipeActionTap/index.json b/demo/pages/SwipeActionTap/index.json new file mode 100644 index 000000000..6c5b17a82 --- /dev/null +++ b/demo/pages/SwipeActionTap/index.json @@ -0,0 +1,9 @@ +{ + "defaultTitle": "Swipe-Action", + "pullRefresh": "NO", + "showProgress": "NO", + "allowsBounceVertical": "NO", + "usingComponents": { + "swipe-action": "../../../src/SwipeAction/index" + } + } \ No newline at end of file diff --git a/demo/pages/SwipeActionTap/index.less b/demo/pages/SwipeActionTap/index.less new file mode 100644 index 000000000..97c75db9e --- /dev/null +++ b/demo/pages/SwipeActionTap/index.less @@ -0,0 +1,41 @@ +@import "../../../src/style/themes/color.less"; +@import (reference) "../../../src/_base/index.less"; + +.t-swipe { + width: 100%; + margin: 0 auto; + background-color: @COLOR_BACKGROUND; + &-item { + height: 130 * @rpx; + line-height: 130 * @rpx; + font-size: 32 * @rpx; + color: @COLOR_TEXT_PRIMARY; + &-title { + width: 100%; + height: 90 * @rpx; + line-height: 100 * @rpx; + font-size: 28 * @rpx; + color: @COLOR_TEXT_ASSIST_DEFAULT; + text-indent: 1em; + } + &-con { + background-color: @COLOR_CARD; + text-indent: 1em; + position: relative; + height: 100%; + color: @COLOR_TEXT_PRIMARY; + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + max-height: 1px; + min-height: 1px; + transform: scaleY(0.5); + background-color: @COLOR_BORDER; + } + } + } +} diff --git a/demo/pages/SwipeActionWidth/index.axml b/demo/pages/SwipeActionWidth/index.axml new file mode 100644 index 000000000..a0e905d0f --- /dev/null +++ b/demo/pages/SwipeActionWidth/index.axml @@ -0,0 +1,18 @@ + + + 自定义按钮宽度 + + + 右侧-三个按钮 + + + + \ No newline at end of file diff --git a/demo/pages/SwipeActionWidth/index.js b/demo/pages/SwipeActionWidth/index.js new file mode 100644 index 000000000..fe3097b75 --- /dev/null +++ b/demo/pages/SwipeActionWidth/index.js @@ -0,0 +1,31 @@ +Page({ + data: { + rightBtns: [ + { + text: '设为常用', + bgColor: '#1677FF', + color: '#fff', + width: 170, + }, + { + text: '往来记录', + bgColor: '#FFA91B', + color: '#fff', + width: 170, + }, + { + 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 }); + }, +}); \ No newline at end of file diff --git a/demo/pages/SwipeActionWidth/index.json b/demo/pages/SwipeActionWidth/index.json new file mode 100644 index 000000000..6c5b17a82 --- /dev/null +++ b/demo/pages/SwipeActionWidth/index.json @@ -0,0 +1,9 @@ +{ + "defaultTitle": "Swipe-Action", + "pullRefresh": "NO", + "showProgress": "NO", + "allowsBounceVertical": "NO", + "usingComponents": { + "swipe-action": "../../../src/SwipeAction/index" + } + } \ No newline at end of file diff --git a/demo/pages/SwipeActionWidth/index.less b/demo/pages/SwipeActionWidth/index.less new file mode 100644 index 000000000..97c75db9e --- /dev/null +++ b/demo/pages/SwipeActionWidth/index.less @@ -0,0 +1,41 @@ +@import "../../../src/style/themes/color.less"; +@import (reference) "../../../src/_base/index.less"; + +.t-swipe { + width: 100%; + margin: 0 auto; + background-color: @COLOR_BACKGROUND; + &-item { + height: 130 * @rpx; + line-height: 130 * @rpx; + font-size: 32 * @rpx; + color: @COLOR_TEXT_PRIMARY; + &-title { + width: 100%; + height: 90 * @rpx; + line-height: 100 * @rpx; + font-size: 28 * @rpx; + color: @COLOR_TEXT_ASSIST_DEFAULT; + text-indent: 1em; + } + &-con { + background-color: @COLOR_CARD; + text-indent: 1em; + position: relative; + height: 100%; + color: @COLOR_TEXT_PRIMARY; + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + max-height: 1px; + min-height: 1px; + transform: scaleY(0.5); + background-color: @COLOR_BORDER; + } + } + } +} diff --git a/src/SwipeAction/index.md b/src/SwipeAction/index.md index 6c08abd44..5300d59cf 100644 --- a/src/SwipeAction/index.md +++ b/src/SwipeAction/index.md @@ -23,14 +23,30 @@ toc: 'content' ### 改变按钮数量 -### 禁用滑动弹性 +### 禁用滑动回弹 + +### 设置按钮宽度 + + +### 设置滑动速度 + + +### 按钮点击二次确认 + + +### 按钮滑出最大距离二次确认 + + +### 左右两侧都有按钮 + ## Tip 1. 该组件父级容器必须设置width和height。 2. 左右两侧都需要滑动按钮时，两侧设置的宽度总和需一致。 3. elasticity设置为false时设置damping数值小一点体验更佳。 -4. appx1.0（钉钉小程序、网页端模拟器）中没有touchend之后滑动过渡效果，appx2.0不受影响。 +4. 每一侧的滑动二次确认只会触发第一个，其他不会触发。 +5. appx1.0（钉钉小程序）中没有touchend之后滑动过渡效果，appx2.0不受影响。 ## 属性 | 属性 | 类型 | 必填 | 默认值 | 说明 | From 249f321617159d09233c4bb5f72dc10c9be738dd Mon Sep 17 00:00:00 2001 From: wujunwen Date: Fri, 16 Dec 2022 21:34:42 +0800 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9.md=20=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E4=B8=AD=E7=9A=84=E9=BB=98=E8=AE=A4=E6=BB=91=E5=8A=A8?= =?UTF-8?q?=E9=80=9F=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SwipeAction/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SwipeAction/index.md b/src/SwipeAction/index.md index 38a8798d3..89caa3cc6 100644 --- a/src/SwipeAction/index.md +++ b/src/SwipeAction/index.md @@ -53,7 +53,7 @@ toc: 'content' | -------------|----------------|-------|-------|------------------------------------------- | | leftButtons | `SwipeButton[]` | 否 | [] | 左侧按钮 | | rightButtons | `SwipeButton[]` | 否 | [] | 右侧按钮 | -| damping | number | 否 | 60 | 滑动速度 | +| damping | number | 否 | 70 | 滑动速度 | | elasticity | boolean | 否 | true | 滑动弹性 | | swiped | `''` | `'left'` | `'right'` | 否 | false | 是否滑开 | | defaultSwiped| `''` | `'left'` | `'right'` | 否 | false | 是否默认滑开 |