From 522861776324b9dcec4f2435838d114a83c84a0a Mon Sep 17 00:00:00 2001 From: Nemo Date: Tue, 30 Jan 2024 20:50:31 +0800 Subject: [PATCH 1/6] chore: init issue demo --- packages/vant/src/picker/demo/index.vue | 77 +++++-------------------- 1 file changed, 13 insertions(+), 64 deletions(-) diff --git a/packages/vant/src/picker/demo/index.vue b/packages/vant/src/picker/demo/index.vue index c6353ceb9dc..4488bab5267 100644 --- a/packages/vant/src/picker/demo/index.vue +++ b/packages/vant/src/picker/demo/index.vue @@ -1,10 +1,5 @@ From df1160795a81572f30cf84290aab132d7c85c85c Mon Sep 17 00:00:00 2001 From: nemo shen Date: Sun, 4 Feb 2024 20:23:19 +0800 Subject: [PATCH 2/6] fix: init --- .nvmrc | 2 +- packages/vant/src/picker/PickerColumn.tsx | 46 +++++++++++++++++++++- packages/vant/src/picker/demo/Sound1.mp3 | Bin 0 -> 4216 bytes packages/vant/src/picker/demo/data.ts | 8 +--- packages/vant/src/picker/demo/index.vue | 32 +++++++-------- 5 files changed, 63 insertions(+), 25 deletions(-) create mode 100644 packages/vant/src/picker/demo/Sound1.mp3 diff --git a/.nvmrc b/.nvmrc index 853c0e122f1..a77793ecc52 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -lts/Hydrogen +lts/hydrogen diff --git a/packages/vant/src/picker/PickerColumn.tsx b/packages/vant/src/picker/PickerColumn.tsx index 7b07594b66e..158c4d28732 100644 --- a/packages/vant/src/picker/PickerColumn.tsx +++ b/packages/vant/src/picker/PickerColumn.tsx @@ -20,7 +20,7 @@ import { import { getElementTranslateY, findIndexOfEnabledOption } from './utils'; // Composables -import { useEventListener, useParent } from '@vant/use'; +import { useEventListener, useParent, useRaf } from '@vant/use'; import { useTouch } from '../composables/use-touch'; import { useExpose } from '../composables/use-expose'; @@ -119,6 +119,7 @@ export default defineComponent({ clamp(Math.round(-offset / props.optionHeight), 0, count() - 1); const currentIndex = computed(() => getIndexByOffset(currentOffset.value)); + console.log('nemo picker columns currentIndex:', currentIndex.value); const momentum = (distance: number, duration: number) => { const speed = Math.abs(distance / duration); @@ -129,6 +130,43 @@ export default defineComponent({ const index = getIndexByOffset(distance); currentDuration.value = +props.swipeDuration; + const itemCount = + Math.max(index, currentIndex.value) - + Math.min(index, currentIndex.value); + const time = duration / speed; + console.log( + 'nemo momentum', + ['currentIndex:', currentIndex.value], + ['nextIndex:', index], + ['distance:', Math.abs(distance)], + ['duration:', duration], + ['itemCount:', itemCount], + ['currentDuration:', currentDuration.value], + ['time:', time], + ['speed:', speed], + ); + const isDown = currentIndex.value < index; + const oldIndex = currentIndex.value; + let i = 0; + let start: number; + + const stop = useRaf( + (timestamp) => { + if (start === undefined) start = timestamp; + const elapsed = timestamp - start; + if (i <= itemCount) { + if (Math.floor(elapsed / time) > i) { + emit('scrollInto', oldIndex + (isDown ? i : -1 * i)); + i++; + } + } else { + stop(); + } + }, + { + isLoop: true, + }, + ); updateValueByIndex(index); }; @@ -180,6 +218,12 @@ export default defineComponent({ ); const newIndex = getIndexByOffset(newOffset); + // console.log( + // 'nemo picker column newIndex: ', + // newIndex, + // 'newOffset:', + // newOffset, + // ); if (newIndex !== currentIndex.value) { emit('scrollInto', props.options[newIndex]); } diff --git a/packages/vant/src/picker/demo/Sound1.mp3 b/packages/vant/src/picker/demo/Sound1.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..18b39b1f558dfb8beaf181b625f738d767a7d115 GIT binary patch literal 4216 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 ({ text: `Item${index}`, value: index })), 'en-US': [ { text: 'Delaware', value: 'Delaware' }, { text: 'Florida', value: 'Florida' }, diff --git a/packages/vant/src/picker/demo/index.vue b/packages/vant/src/picker/demo/index.vue index 4488bab5267..67b3e8cd093 100644 --- a/packages/vant/src/picker/demo/index.vue +++ b/packages/vant/src/picker/demo/index.vue @@ -42,27 +42,27 @@ const t = useTranslate({ }, }); -const onChange = (value: string[]) => { - console.log('onChange', value) -} +const onChange = ({ selectedOptions }) => { + console.log('onChange', selectedOptions[0]); +}; -const onScrollInto = ({ - columnIndex, - currentOption, -}: any) => { - console.log('onScrollInto', columnIndex, currentOption); +// const audio = new Audio( +// 'data:audio/mpeg;base64,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P8TVYG8OI+BNi5HU1JYiCwBQJdcUIpZWQkqFDAVBpGCM0MCKaFmMCEESVChjiJFHFkREGiZrYxyUpf0qhQs+VxQomgdGgqVBUFYKg0DQlddi/9pb/iWVO0xBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVX/+3DE6wARgVcd7DBz4ikp4rWGGjlVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//sgxPGDzTy5DaM9KMAAAD/AAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ==', +// ); +const onScrollInto = ({ currentOption }: { text: string; value: string }) => { + // audio.currentTime = 0; + // audio.play(); + console.log('nemo onScrollInto', currentOption); // 一个一个滑动的话，currentOption是当前选中的值。 //通过惯性滚动的话，currentOption并不是当前选中的值。 }; From 1b6b7a4d5bf724e536cafd3eb79f231007d1cbbc Mon Sep 17 00:00:00 2001 From: nemo shen Date: Sun, 4 Feb 2024 21:23:56 +0800 Subject: [PATCH 3/6] fix: emit scrollInto when click option --- packages/vant/src/picker/PickerColumn.tsx | 54 ++++++++--------- packages/vant/src/picker/demo/index.vue | 72 +++++++---------------- 2 files changed, 46 insertions(+), 80 deletions(-) diff --git a/packages/vant/src/picker/PickerColumn.tsx b/packages/vant/src/picker/PickerColumn.tsx index 158c4d28732..132e22cc1af 100644 --- a/packages/vant/src/picker/PickerColumn.tsx +++ b/packages/vant/src/picker/PickerColumn.tsx @@ -111,6 +111,9 @@ export default defineComponent({ transitionEndTrigger = null; currentDuration.value = DEFAULT_DURATION; + const distance = currentOffset.value - momentumOffset; + const duration = Date.now() - touchStartTime; + scrollInto(index, duration, Math.abs(distance / duration)); updateValueByIndex(index); emit('clickOption', props.options[index]); }; @@ -119,7 +122,7 @@ export default defineComponent({ clamp(Math.round(-offset / props.optionHeight), 0, count() - 1); const currentIndex = computed(() => getIndexByOffset(currentOffset.value)); - console.log('nemo picker columns currentIndex:', currentIndex.value); + let stop: () => void; const momentum = (distance: number, duration: number) => { const speed = Math.abs(distance / duration); @@ -130,34 +133,32 @@ export default defineComponent({ const index = getIndexByOffset(distance); currentDuration.value = +props.swipeDuration; - const itemCount = - Math.max(index, currentIndex.value) - - Math.min(index, currentIndex.value); + + scrollInto(index, duration, speed); + + updateValueByIndex(index); + }; + + const scrollInto = (index: number, duration: number, speed: number) => { + // const duration = currentDuration.value; + const oldIndex = currentIndex.value; + const itemCount = Math.max(index, oldIndex) - Math.min(index, oldIndex); const time = duration / speed; - console.log( - 'nemo momentum', - ['currentIndex:', currentIndex.value], - ['nextIndex:', index], - ['distance:', Math.abs(distance)], - ['duration:', duration], - ['itemCount:', itemCount], - ['currentDuration:', currentDuration.value], - ['time:', time], - ['speed:', speed], - ); + let passedCount = 0; const isDown = currentIndex.value < index; - const oldIndex = currentIndex.value; - let i = 0; let start: number; - - const stop = useRaf( + if (stop) stop(); + stop = useRaf( (timestamp) => { if (start === undefined) start = timestamp; const elapsed = timestamp - start; - if (i <= itemCount) { - if (Math.floor(elapsed / time) > i) { - emit('scrollInto', oldIndex + (isDown ? i : -1 * i)); - i++; + if (passedCount <= itemCount) { + const currentCount = Math.round(elapsed / time); + if (passedCount <= currentCount) { + const option = + props.options[oldIndex + (isDown ? passedCount : -passedCount)]; + emit('scrollInto', option); + passedCount++; } } else { stop(); @@ -167,7 +168,6 @@ export default defineComponent({ isLoop: true, }, ); - updateValueByIndex(index); }; const stopMomentum = () => { @@ -218,12 +218,6 @@ export default defineComponent({ ); const newIndex = getIndexByOffset(newOffset); - // console.log( - // 'nemo picker column newIndex: ', - // newIndex, - // 'newOffset:', - // newOffset, - // ); if (newIndex !== currentIndex.value) { emit('scrollInto', props.options[newIndex]); } diff --git a/packages/vant/src/picker/demo/index.vue b/packages/vant/src/picker/demo/index.vue index 67b3e8cd093..e1df6d6e206 100644 --- a/packages/vant/src/picker/demo/index.vue +++ b/packages/vant/src/picker/demo/index.vue @@ -1,68 +1,40 @@ From a0fcd1abf676a191cc864773e8e64d2ec43b5e7c Mon Sep 17 00:00:00 2001 From: nemo shen Date: Sun, 4 Feb 2024 21:40:13 +0800 Subject: [PATCH 4/6] fix: revert change --- .nvmrc | 2 +- packages/vant/src/picker/demo/Sound1.mp3 | Bin 4216 -> 0 bytes packages/vant/src/picker/demo/data.ts | 8 +++++++- packages/vant/src/picker/demo/index.vue | 6 +++--- 4 files changed, 11 insertions(+), 5 deletions(-) delete mode 100644 packages/vant/src/picker/demo/Sound1.mp3 diff --git a/.nvmrc b/.nvmrc index a77793ecc52..853c0e122f1 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -lts/hydrogen +lts/Hydrogen diff --git a/packages/vant/src/picker/demo/Sound1.mp3 b/packages/vant/src/picker/demo/Sound1.mp3 deleted file mode 100644 index 18b39b1f558dfb8beaf181b625f738d767a7d115..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4216 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 ({ text: `Item${index}`, value: index })), + 'zh-CN': [ + { text: '杭州', value: 'Hangzhou' }, + { text: '宁波', value: 'Ningbo' }, + { text: '温州', value: 'Wenzhou' }, + { text: '绍兴', value: 'Shaoxing' }, + { text: '湖州', value: 'Huzhou' }, + ], 'en-US': [ { text: 'Delaware', value: 'Delaware' }, { text: 'Florida', value: 'Florida' }, diff --git a/packages/vant/src/picker/demo/index.vue b/packages/vant/src/picker/demo/index.vue index e1df6d6e206..9682817ac3d 100644 --- a/packages/vant/src/picker/demo/index.vue +++ b/packages/vant/src/picker/demo/index.vue @@ -18,7 +18,7 @@ const onScrollInto = ({ scrollIntoValue.value = currentOption; // audio.currentTime = 0; // audio.play(); - console.log('nemo onScrollInto', currentOption); + console.log('scrollInto:', currentOption); }; const fieldValue = ref(); const columns = Array.from({ length: 100 }, (_, index) => ({ text: `Item${index}`, value: index })) @@ -29,8 +29,8 @@ const onChangeFieldValue = (value) => {