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) {
// 防止事件重复触发