Skip to content

Commit ce3c4b2

Browse files
anlyyaoanlyyao
authored
feat(Picker): support click selection (#3712)
* feat(Picker): support click selection * test: update snapshots * fix: fix cr * fix(Picker): fx the change event repeated triggering * test: update snapshots
1 parent 18cfca9 commit ce3c4b2

File tree

6 files changed

+76
-25
lines changed

6 files changed

+76
-25
lines changed

‎src/date-time-picker/__test__/__snapshots__/index.test.js.snap‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ exports[`date-time-picker :base 1`] = `
66
<t-picker
77
class="class t-class t-date-time-picker"
88
bind:cancel="onCancel"
9-
bind:change="onConfirm"
109
bind:close="onClose"
10+
bind:confirm="onConfirm"
1111
bind:pick="onColumnChange"
1212
bind:visible-change="onVisibleChange"
1313
>
@@ -75,6 +75,7 @@ exports[`date-time-picker :base 1`] = `
7575
class="t-picker-item__item"
7676
data-index="{{0}}"
7777
style="height: 40px"
78+
bind:tap="onClickItem"
7879
>
7980
<wx-text
8081
class="t-picker-item__item-label"
@@ -86,6 +87,7 @@ exports[`date-time-picker :base 1`] = `
8687
class="t-picker-item__item"
8788
data-index="{{1}}"
8889
style="height: 40px"
90+
bind:tap="onClickItem"
8991
>
9092
<wx-text
9193
class="t-picker-item__item-label"
@@ -97,6 +99,7 @@ exports[`date-time-picker :base 1`] = `
9799
class="t-picker-item__item"
98100
data-index="{{2}}"
99101
style="height: 40px"
102+
bind:tap="onClickItem"
100103
>
101104
<wx-text
102105
class="t-picker-item__item-label"
@@ -108,6 +111,7 @@ exports[`date-time-picker :base 1`] = `
108111
class="t-picker-item__item"
109112
data-index="{{3}}"
110113
style="height: 40px"
114+
bind:tap="onClickItem"
111115
>
112116
<wx-text
113117
class="t-picker-item__item-label"
@@ -119,6 +123,7 @@ exports[`date-time-picker :base 1`] = `
119123
class="t-picker-item__item"
120124
data-index="{{4}}"
121125
style="height: 40px"
126+
bind:tap="onClickItem"
122127
>
123128
<wx-text
124129
class="t-picker-item__item-label"
@@ -130,6 +135,7 @@ exports[`date-time-picker :base 1`] = `
130135
class="t-picker-item__item"
131136
data-index="{{5}}"
132137
style="height: 40px"
138+
bind:tap="onClickItem"
133139
>
134140
<wx-text
135141
class="t-picker-item__item-label"
@@ -141,6 +147,7 @@ exports[`date-time-picker :base 1`] = `
141147
class="t-picker-item__item t-picker-item__item--active"
142148
data-index="{{6}}"
143149
style="height: 40px"
150+
bind:tap="onClickItem"
144151
>
145152
<wx-text
146153
class="t-picker-item__item-label"
@@ -152,6 +159,7 @@ exports[`date-time-picker :base 1`] = `
152159
class="t-picker-item__item"
153160
data-index="{{7}}"
154161
style="height: 40px"
162+
bind:tap="onClickItem"
155163
>
156164
<wx-text
157165
class="t-picker-item__item-label"
@@ -163,6 +171,7 @@ exports[`date-time-picker :base 1`] = `
163171
class="t-picker-item__item"
164172
data-index="{{8}}"
165173
style="height: 40px"
174+
bind:tap="onClickItem"
166175
>
167176
<wx-text
168177
class="t-picker-item__item-label"
@@ -174,6 +183,7 @@ exports[`date-time-picker :base 1`] = `
174183
class="t-picker-item__item"
175184
data-index="{{9}}"
176185
style="height: 40px"
186+
bind:tap="onClickItem"
177187
>
178188
<wx-text
179189
class="t-picker-item__item-label"
@@ -185,6 +195,7 @@ exports[`date-time-picker :base 1`] = `
185195
class="t-picker-item__item"
186196
data-index="{{10}}"
187197
style="height: 40px"
198+
bind:tap="onClickItem"
188199
>
189200
<wx-text
190201
class="t-picker-item__item-label"
@@ -196,6 +207,7 @@ exports[`date-time-picker :base 1`] = `
196207
class="t-picker-item__item"
197208
data-index="{{11}}"
198209
style="height: 40px"
210+
bind:tap="onClickItem"
199211
>
200212
<wx-text
201213
class="t-picker-item__item-label"
@@ -207,6 +219,7 @@ exports[`date-time-picker :base 1`] = `
207219
class="t-picker-item__item"
208220
data-index="{{12}}"
209221
style="height: 40px"
222+
bind:tap="onClickItem"
210223
>
211224
<wx-text
212225
class="t-picker-item__item-label"
@@ -218,6 +231,7 @@ exports[`date-time-picker :base 1`] = `
218231
class="t-picker-item__item"
219232
data-index="{{13}}"
220233
style="height: 40px"
234+
bind:tap="onClickItem"
221235
>
222236
<wx-text
223237
class="t-picker-item__item-label"
@@ -229,6 +243,7 @@ exports[`date-time-picker :base 1`] = `
229243
class="t-picker-item__item"
230244
data-index="{{14}}"
231245
style="height: 40px"
246+
bind:tap="onClickItem"
232247
>
233248
<wx-text
234249
class="t-picker-item__item-label"
@@ -240,6 +255,7 @@ exports[`date-time-picker :base 1`] = `
240255
class="t-picker-item__item"
241256
data-index="{{15}}"
242257
style="height: 40px"
258+
bind:tap="onClickItem"
243259
>
244260
<wx-text
245261
class="t-picker-item__item-label"
@@ -251,6 +267,7 @@ exports[`date-time-picker :base 1`] = `
251267
class="t-picker-item__item"
252268
data-index="{{16}}"
253269
style="height: 40px"
270+
bind:tap="onClickItem"
254271
>
255272
<wx-text
256273
class="t-picker-item__item-label"
@@ -262,6 +279,7 @@ exports[`date-time-picker :base 1`] = `
262279
class="t-picker-item__item"
263280
data-index="{{17}}"
264281
style="height: 40px"
282+
bind:tap="onClickItem"
265283
>
266284
<wx-text
267285
class="t-picker-item__item-label"
@@ -273,6 +291,7 @@ exports[`date-time-picker :base 1`] = `
273291
class="t-picker-item__item"
274292
data-index="{{18}}"
275293
style="height: 40px"
294+
bind:tap="onClickItem"
276295
>
277296
<wx-text
278297
class="t-picker-item__item-label"
@@ -284,6 +303,7 @@ exports[`date-time-picker :base 1`] = `
284303
class="t-picker-item__item"
285304
data-index="{{19}}"
286305
style="height: 40px"
306+
bind:tap="onClickItem"
287307
>
288308
<wx-text
289309
class="t-picker-item__item-label"
@@ -295,6 +315,7 @@ exports[`date-time-picker :base 1`] = `
295315
class="t-picker-item__item"
296316
data-index="{{20}}"
297317
style="height: 40px"
318+
bind:tap="onClickItem"
298319
>
299320
<wx-text
300321
class="t-picker-item__item-label"
@@ -325,6 +346,7 @@ exports[`date-time-picker :base 1`] = `
325346
class="t-picker-item__item"
326347
data-index="{{0}}"
327348
style="height: 40px"
349+
bind:tap="onClickItem"
328350
>
329351
<wx-text
330352
class="t-picker-item__item-label"
@@ -336,6 +358,7 @@ exports[`date-time-picker :base 1`] = `
336358
class="t-picker-item__item"
337359
data-index="{{1}}"
338360
style="height: 40px"
361+
bind:tap="onClickItem"
339362
>
340363
<wx-text
341364
class="t-picker-item__item-label"
@@ -347,6 +370,7 @@ exports[`date-time-picker :base 1`] = `
347370
class="t-picker-item__item"
348371
data-index="{{2}}"
349372
style="height: 40px"
373+
bind:tap="onClickItem"
350374
>
351375
<wx-text
352376
class="t-picker-item__item-label"
@@ -358,6 +382,7 @@ exports[`date-time-picker :base 1`] = `
358382
class="t-picker-item__item"
359383
data-index="{{3}}"
360384
style="height: 40px"
385+
bind:tap="onClickItem"
361386
>
362387
<wx-text
363388
class="t-picker-item__item-label"
@@ -369,6 +394,7 @@ exports[`date-time-picker :base 1`] = `
369394
class="t-picker-item__item"
370395
data-index="{{4}}"
371396
style="height: 40px"
397+
bind:tap="onClickItem"
372398
>
373399
<wx-text
374400
class="t-picker-item__item-label"
@@ -380,6 +406,7 @@ exports[`date-time-picker :base 1`] = `
380406
class="t-picker-item__item"
381407
data-index="{{5}}"
382408
style="height: 40px"
409+
bind:tap="onClickItem"
383410
>
384411
<wx-text
385412
class="t-picker-item__item-label"
@@ -391,6 +418,7 @@ exports[`date-time-picker :base 1`] = `
391418
class="t-picker-item__item"
392419
data-index="{{6}}"
393420
style="height: 40px"
421+
bind:tap="onClickItem"
394422
>
395423
<wx-text
396424
class="t-picker-item__item-label"
@@ -402,6 +430,7 @@ exports[`date-time-picker :base 1`] = `
402430
class="t-picker-item__item"
403431
data-index="{{7}}"
404432
style="height: 40px"
433+
bind:tap="onClickItem"
405434
>
406435
<wx-text
407436
class="t-picker-item__item-label"
@@ -413,6 +442,7 @@ exports[`date-time-picker :base 1`] = `
413442
class="t-picker-item__item t-picker-item__item--active"
414443
data-index="{{8}}"
415444
style="height: 40px"
445+
bind:tap="onClickItem"
416446
>
417447
<wx-text
418448
class="t-picker-item__item-label"
@@ -424,6 +454,7 @@ exports[`date-time-picker :base 1`] = `
424454
class="t-picker-item__item"
425455
data-index="{{9}}"
426456
style="height: 40px"
457+
bind:tap="onClickItem"
427458
>
428459
<wx-text
429460
class="t-picker-item__item-label"
@@ -435,6 +466,7 @@ exports[`date-time-picker :base 1`] = `
435466
class="t-picker-item__item"
436467
data-index="{{10}}"
437468
style="height: 40px"
469+
bind:tap="onClickItem"
438470
>
439471
<wx-text
440472
class="t-picker-item__item-label"
@@ -446,6 +478,7 @@ exports[`date-time-picker :base 1`] = `
446478
class="t-picker-item__item"
447479
data-index="{{11}}"
448480
style="height: 40px"
481+
bind:tap="onClickItem"
449482
>
450483
<wx-text
451484
class="t-picker-item__item-label"

‎src/date-time-picker/date-time-picker.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
use-popup="{{usePopup}}"
1313
popup-props="{{ popupProps }}"
1414
bind:pick="onColumnChange"
15-
bind:change="onConfirm"
15+
bind:confirm="onConfirm"
1616
bind:cancel="onCancel"
1717
bind:visible-change="onVisibleChange"
1818
bind:close="onClose"

‎src/picker-item/picker-item.ts‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,18 @@ export default class PickerItem extends SuperComponent {
8181
};
8282

8383
methods = {
84+
onClickItem(event: WechatMiniprogram.TouchEvent) {
85+
const { index: clickIndex } = event.currentTarget.dataset;
86+
const { pickItemHeight } = this.data;
87+
const index = range(clickIndex, 0, this.getCount() - 1);
88+
89+
if (index !== this._selectedIndex) {
90+
this.setData({ offset: -index * pickItemHeight, curIndex: index, duration: 200 });
91+
}
92+
93+
this.updateSelected(index, true);
94+
},
95+
8496
onTouchStart(event) {
8597
this.StartY = event.touches[0].clientY;
8698
this.StartOffset = this.data.offset;
@@ -102,7 +114,7 @@ export default class PickerItem extends SuperComponent {
102114
},
103115

104116
onTouchEnd(event) {
105-
const { offset, pickerKeys, columnIndex, pickItemHeight, formatOptions } = this.data;
117+
const { offset, pickItemHeight } = this.data;
106118
const { startTime } = this;
107119
if (offset === this.StartOffset) {
108120
return;
@@ -124,20 +136,8 @@ export default class PickerItem extends SuperComponent {
124136
duration: ANIMATION_DURATION,
125137
curIndex: index,
126138
});
127-
if (index === this._selectedIndex) {
128-
return;
129-
}
130-
this._selectedIndex = index;
131-
132-
wx.nextTick(() => {
133-
this._selectedIndex = index;
134-
this._selectedValue = formatOptions[index]?.[pickerKeys?.value];
135-
this._selectedLabel = formatOptions[index]?.[pickerKeys?.label];
136-
this.$parent?.triggerColumnChange({
137-
index,
138-
column: columnIndex,
139-
});
140-
});
139+
if (index === this._selectedIndex) return;
140+
this.updateSelected(index, true);
141141
},
142142

143143
formatOption(options: PickerItemOption[], columnIndex: number, format: any) {
@@ -148,6 +148,20 @@ export default class PickerItem extends SuperComponent {
148148
});
149149
},
150150

151+
updateSelected(index: number, trigger: boolean) {
152+
const { columnIndex, pickerKeys, formatOptions } = this.data;
153+
this._selectedIndex = index;
154+
this._selectedValue = formatOptions[index]?.[pickerKeys?.value];
155+
this._selectedLabel = formatOptions[index]?.[pickerKeys?.label];
156+
157+
if (trigger) {
158+
this.$parent?.triggerColumnChange({
159+
index,
160+
column: columnIndex,
161+
});
162+
}
163+
},
164+
151165
// 刷新选中状态
152166
update() {
153167
const { options, value, pickerKeys, pickItemHeight, format, columnIndex } = this.data;
@@ -157,19 +171,13 @@ export default class PickerItem extends SuperComponent {
157171
const index = formatOptions.findIndex((item: PickerItemOption) => item[pickerKeys?.value] === value);
158172
const selectedIndex = index > 0 ? index : 0;
159173

160-
this._selectedIndex = selectedIndex;
161-
this._selectedValue = formatOptions[selectedIndex]?.[pickerKeys?.value];
162-
this._selectedLabel = formatOptions[selectedIndex]?.[pickerKeys?.label];
174+
this.updateSelected(selectedIndex, false);
163175

164176
this.setData({
165177
formatOptions,
166178
offset: -selectedIndex * pickItemHeight,
167179
curIndex: selectedIndex,
168180
});
169-
170-
this._selectedIndex = selectedIndex;
171-
this._selectedValue = options[selectedIndex]?.[pickerKeys?.value];
172-
this._selectedLabel = options[selectedIndex]?.[pickerKeys?.label];
173181
},
174182

175183
getCount() {

‎src/picker-item/picker-item.wxml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
wx:key="index"
2020
wx:for-item="option"
2121
data-index="{{ index }}"
22+
bind:tap="onClickItem"
2223
>
2324
<text class="{{classPrefix}}__item-label">{{option[pickerKeys.label]}}</text>
2425
<slot name="label-suffix--{{index}}"></slot>

0 commit comments

Comments
 (0)