Skip to content

Commit 584c9be

Browse files
rayhomierayhomie
committed
fix: SwipeAction swiped
1 parent 08a3cb9 commit 584c9be

4 files changed

Lines changed: 125 additions & 13 deletions

File tree

‎demo/pages/SwipeAction/index.axml‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -329,3 +329,54 @@
329329
</block>
330330
</view>
331331
</view>
332+
333+
<view class="t-swipe">
334+
<view class="t-swipe-item">
335+
<view class="t-swipe-item-title">默认展开-使用 defaultSwiped</view>
336+
<view class="t-swipe-item-con">
337+
<ant-swipe-action
338+
rightButtons="{{ rightBtns }}"
339+
elasticity="{{ true }}"
340+
defaultSwiped="right"
341+
onSwipeEnd="onSwipeEnd"
342+
onSwipeStart="onSwipeStart"
343+
onButtonTap="onButtonTap">
344+
<view class="t-swipe-item-con-view">默认展开右侧按钮(defaultSwiped="right")</view>
345+
</ant-swipe-action>
346+
</view>
347+
<view class="t-swipe-item-con">
348+
<ant-swipe-action
349+
leftButtons="{{ leftBtns }}"
350+
elasticity="{{ true }}"
351+
defaultSwiped="left"
352+
onSwipeEnd="onSwipeEnd"
353+
onSwipeStart="onSwipeStart"
354+
onButtonTap="onButtonTap">
355+
<view class="t-swipe-item-con-view">默认展开左侧按钮(defaultSwiped="left")</view>
356+
</ant-swipe-action>
357+
</view>
358+
</view>
359+
</view>
360+
361+
<view class="t-swipe">
362+
<view class="t-swipe-item">
363+
<view class="t-swipe-item-title">受控模式-通过按钮控制展开</view>
364+
<view class="control-buttons">
365+
<button size="mini" onTap="onControlSwipe" data-index="0" data-direction="">关闭</button>
366+
<button size="mini" onTap="onControlSwipe" data-index="0" data-direction="right">展开右侧</button>
367+
<button size="mini" onTap="onControlSwipe" data-index="0" data-direction="left">展开左侧</button>
368+
</view>
369+
<view class="t-swipe-item-con">
370+
<ant-swipe-action
371+
rightButtons="{{ rightBtns }}"
372+
leftButtons="{{ leftBtns }}"
373+
elasticity="{{ true }}"
374+
swiped="{{ controlledSwipe }}"
375+
onSwipeEnd="onSwipeEnd"
376+
onSwipeStart="onSwipeStart"
377+
onButtonTap="onButtonTap">
378+
<view class="t-swipe-item-con-view">受控组件示例1 - 当前状态: {{ controlledSwipe || '关闭' }}</view>
379+
</ant-swipe-action>
380+
</view>
381+
</view>
382+
</view>

‎demo/pages/SwipeAction/index.less‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,3 +58,14 @@
5858
justify-content: center;
5959
width: 100%;
6060
}
61+
62+
.control-buttons {
63+
display: flex;
64+
gap: 16 * @rpx;
65+
padding: 16 * @rpx;
66+
background-color: var(--color-background);
67+
button {
68+
flex: 1;
69+
font-size: 24 * @rpx;
70+
}
71+
}

‎demo/pages/SwipeAction/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
Page({
22
data: {
3+
controlledSwipe: '',
34
rightBtns: [
45
{
56
text: '取消关注',
@@ -99,4 +100,10 @@ Page({
99100
onButtonTap(data, e) {
100101
console.log(data, e);
101102
},
103+
onControlSwipe(e) {
104+
const { direction } = e.currentTarget.dataset;
105+
this.setData({
106+
controlledSwipe: direction,
107+
});
108+
},
102109
});

‎src/SwipeAction/index.ts‎

Lines changed: 56 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -95,27 +95,69 @@ Component(
9595
transformOptions({
9696
props: SwipeActionDefaultProps,
9797
didMount() {
98-
const { defaultSwiped, elasticity } = this.getProps();
99-
this.setButtonItemWidth();
98+
const { defaultSwiped, swiped, elasticity } = this.getProps();
10099
this.setData({ inertiaWidth: !isOldVersion && elasticity ? 20 : 0 });
101-
if (defaultSwiped) {
102-
this.initWidth((maxSwipe: any) => {
103-
maxSwipe &&
104-
this.setData({
105-
swipeX: (maxSwipe + 0.01) * (defaultSwiped === 'right' ? -1 : 1),
106-
swipedR: defaultSwiped === 'right',
107-
swipedL: defaultSwiped === 'left',
108-
});
109-
});
100+
101+
// 优先使用 swiped 属性(受控),其次使用 defaultSwiped(非受控)
102+
const initialSwiped = swiped || defaultSwiped;
103+
104+
// 先设置按钮宽度,然后在回调中处理初始展开状态
105+
this.setButtonItemWidth();
106+
107+
if (initialSwiped) {
108+
// 需要等待按钮宽度设置完成后再初始化展开状态
109+
setTimeout(() => {
110+
this.initWidth((maxSwipe: any) => {
111+
if (maxSwipe) {
112+
const direction = initialSwiped === 'left' ? 'left' : 'right';
113+
this.setData({
114+
swipeX: (maxSwipe + 0.01) * (direction === 'right' ? -1 : 1),
115+
swipedR: direction === 'right',
116+
swipedL: direction === 'left',
117+
});
118+
}
119+
});
120+
}, 50);
110121
}
111122
},
112123
didUpdate(prevProp) {
113124
const { swiped, damping, elasticity } = this.getProps();
114125
// 设置不同的滑动位置时需要重置
115-
const rs = prevProp.swiped !== swiped && !swiped;
126+
const swipedChanged = prevProp.swiped !== swiped;
116127
const is = prevProp.elasticity !== elasticity;
117128
const ds = prevProp.damping !== damping;
118-
if (rs || is || ds) {
129+
130+
// 处理 swiped 变化
131+
if (swipedChanged) {
132+
if (!swiped) {
133+
// swiped 变为 false/空,需要关闭
134+
this.setData({
135+
swipeX: 0,
136+
swipedR: false,
137+
swipedL: false,
138+
tapTypeL: '',
139+
tapTypeR: '',
140+
});
141+
} else {
142+
// swiped 变为 true/'left'/'right',需要打开
143+
// 需要等待下一个事件循环,确保按钮宽度已经渲染
144+
setTimeout(() => {
145+
this.initWidth((maxSwipe: any) => {
146+
if (maxSwipe) {
147+
const direction = swiped === 'left' ? 'left' : 'right';
148+
this.setData({
149+
swipeX: (maxSwipe + 0.01) * (direction === 'right' ? -1 : 1),
150+
swipedR: direction === 'right',
151+
swipedL: direction === 'left',
152+
tapTypeL: '',
153+
tapTypeR: '',
154+
});
155+
}
156+
});
157+
}, 50);
158+
}
159+
} else if (is || ds) {
160+
// 只有 elasticity 或 damping 变化时,才需要重置
119161
this.setData({
120162
swipeX: 0,
121163
swipedR: false,
@@ -124,6 +166,7 @@ Component(
124166
tapTypeR: '',
125167
});
126168
}
169+
127170
if (is) {
128171
this.setData({ inertiaWidth: elasticity ? 20 : 0 });
129172
}

0 commit comments

Comments
 (0)