fix(picker): fix custom height problem (#1576)

* fix(picker): fix custom height problem

deleted unexpected reset of itemHeight in initScrollParams(), changed the positioning of the
indicator to a dynamic value based on --td-picker-item-height; Added a demo of using custom height

fix #1207

* chore: update common

* chore: update snapshot

* fix(picker): auto mediate indicator

* chore: update common

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: jby0107

src/_common

@@ -1371,6 +1371,47 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
       </teleport-stub>
       
       
+      <div
+        class="t-cell t-cell--middle"
+      >
+        <div
+          class="t-cell__left"
+        >
+          <!---->
+          <!---->
+        </div>
+        <div
+          class="t-cell__title"
+        >
+          自定义高度选择器
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <div
+          class="t-cell__right"
+        >
+          <div
+            class="t-cell__right-icon"
+          >
+            <svg
+              class="t-icon t-icon-chevron-right"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <!--v-if-->
+      
+      
     </div>
   </div>
 </div>

src/picker/__test__/__snapshots__/demo.test.jsx.snap

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { PickerValue } from 'tdesign-mobile-vue';
+
+const cityOptions = () => {
+  return [
+    {
+      label: '北京市',
+      value: '北京市',
+    },
+    {
+      label: '上海市',
+      value: '上海市',
+    },
+    {
+      label: '广州市',
+      value: '广州市',
+    },
+    {
+      label: '深圳市',
+      value: '深圳市',
+    },
+    {
+      label: '杭州市',
+      value: '杭州市',
+    },
+    {
+      label: '成都市',
+      value: '成都市',
+    },
+    {
+      label: '长沙市',
+      value: '长沙市',
+    },
+  ];
+};
+
+const cityState = reactive({
+  show: false,
+  city: [],
+});
+
+const onConfirm = (val: string[], context: number[]) => {
+  console.log(val);
+  console.log('context', context);
+  cityState.show = false;
+};
+
+const onPick = (value: PickerValue[], context: any) => {
+  console.log('value', value);
+  console.log('context', context);
+};
+</script>
+
+<template>
+  <t-cell arrow title="自定义高度选择器" :note="cityState.city.join(' ')" @click="cityState.show = true" />
+  <t-popup v-if="cityState.show" v-model="cityState.show" class="picker-custom-height-demo" placement="bottom">
+    <t-picker
+      v-model="cityState.city"
+      :columns="cityOptions"
+      @confirm="onConfirm"
+      @cancel="cityState.show = false"
+      @pick="onPick"
+    />
+  </t-popup>
+</template>
+
+<style lang="less">
+.picker-custom-height-demo {
+  --td-picker-item-height: 80px;
+  --td-picker-group-height: 400px;
+}
+</style>

src/picker/demos/customHeight.vue

@@ -9,6 +9,7 @@
     <tdesign-demo-block title="02 组件样式">
       <!-- <CasCadeDemo /> -->
       <titleDemo />
+      <CustomHeightDemo />
     </tdesign-demo-block>
   </div>
 </template>
@@ -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';
 </script>

src/picker/demos/mobile.vue

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