diff --git a/src/_common b/src/_common index 40ecdc1e5..f3725c1e1 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 40ecdc1e58612eb9b86cce76ab01ee3d16d3f98e +Subproject commit f3725c1e1f67a2ad3dcc54b2bc213a2500cacd88 diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap index ee01a569e..8aa0556be 100644 --- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap @@ -1371,6 +1371,47 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = ` +
+
+ + +
+
+ 自定义高度选择器 + + +
+ +
+
+ + + +
+
+
+ + + diff --git a/src/picker/demos/customHeight.vue b/src/picker/demos/customHeight.vue new file mode 100644 index 000000000..29ff5ac8e --- /dev/null +++ b/src/picker/demos/customHeight.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/src/picker/demos/mobile.vue b/src/picker/demos/mobile.vue index 97ee1b648..593f83924 100644 --- a/src/picker/demos/mobile.vue +++ b/src/picker/demos/mobile.vue @@ -9,6 +9,7 @@ + @@ -17,4 +18,5 @@ import BaseDemo from './base.vue'; // import CasCadeDemo from './cascade.vue'; import titleDemo from './title.vue'; import AreaDemo from './area.vue'; +import CustomHeightDemo from './customHeight.vue'; diff --git a/src/picker/picker.class.ts b/src/picker/picker.class.ts index 65f5a9200..54c90ef50 100644 --- a/src/picker/picker.class.ts +++ b/src/picker/picker.class.ts @@ -73,6 +73,10 @@ class Picker { onChange: (index: number) => void; + itemGroupHeight: number; + + indicatorOffset: number; + constructor(options: PickerOptions) { if (!options.el) throw new Error('options el needed!'); this.holder = options.el; @@ -105,13 +109,14 @@ class Picker { */ initScrollParams(): void { this.list = this.holder as HTMLUListElement; + this.itemGroupHeight = this.holder.parentElement?.offsetHeight || DEFAULT_HOLDER_HEIGHT; this.elementItems = [...this.holder.querySelectorAll('li')]; this.itemHeight = this.holder.querySelector('li')?.offsetHeight || DEFAULT_ITEM_HEIGHT; this.height = this.holder.offsetHeight || DEFAULT_HOLDER_HEIGHT; + this.indicatorOffset = this.itemGroupHeight / 2 - this.itemHeight / 2; let curIndex = this.options.defaultIndex || 0; this.itemClassName = `${prefix}-picker-item__item`; this.itemSelectedClassName = `${prefix}-picker-item__item--active`; - this.itemHeight = DEFAULT_ITEM_HEIGHT; this.startY = 0; this.isPicking = false; this.lastMoveTime = 0; @@ -127,13 +132,14 @@ class Picker { return curIndex; }, }); - const startOffsetY = (-this.curIndex + 2) * this.itemHeight; + + const startOffsetY = this.indicatorOffset - this.curIndex * this.itemHeight; const itemLen = this.elementItems.length; this.setOffsetY(startOffsetY); this.offsetYOfStart = startOffsetY; - this.offsetYOfEnd = -this.itemHeight * (itemLen - 3); - this.offsetYOfStartBound = this.itemHeight * 2 + OFFSET_OF_BOUND; - this.offsetYOfEndBound = -(this.itemHeight * (itemLen - 3) + OFFSET_OF_BOUND); + this.offsetYOfEnd = this.indicatorOffset - (itemLen - 1) * this.itemHeight; + this.offsetYOfStartBound = this.indicatorOffset + OFFSET_OF_BOUND; + this.offsetYOfEndBound = this.indicatorOffset - (itemLen - 1) * this.itemHeight - OFFSET_OF_BOUND; } bindEvent(): void { @@ -159,7 +165,7 @@ class Picker { const endY = event.changedTouches[0].pageY; const dragRange = endY - this.startY; this.updateInertiaParams(event, false); - const moveOffsetY = (-this.curIndex + 2) * this.itemHeight + dragRange; + const moveOffsetY = this.indicatorOffset - this.curIndex * this.itemHeight + dragRange; this.setOffsetY(moveOffsetY); } @@ -263,7 +269,7 @@ class Picker { }; this.curIndex = index; this.setSelectedClassName(); - const moveOffsetY = (-index + 2) * this.itemHeight; + const moveOffsetY = this.indicatorOffset - index * this.itemHeight; if (this.list) { this.list.style.transform = `translate(0,${moveOffsetY}px) translateZ(0)`; this.list.style.transitionDuration = `${realOptions.duration}ms`; @@ -347,11 +353,11 @@ class Picker { if (this.list) { this.list.style.transition = `${ANIMATION_DURATION}ms ease-out`; } - curIndex = 2 - Math.round(this.offsetY / this.itemHeight); + curIndex = -Math.round((this.offsetY - this.indicatorOffset) / this.itemHeight); if (curIndex < 0) curIndex = 0; if (curIndex > this.elementItems.length - 1) curIndex = this.elementItems.length - 1; } - const offsetY = (-curIndex + 2) * this.itemHeight; + const offsetY = this.indicatorOffset - curIndex * this.itemHeight; this.setOffsetY(offsetY); if (curIndex !== this.curIndex) { // 防止事件重复触发