Feat/picker/item height

src/common/utils.ts

@@ -277,3 +277,5 @@ export const isOverSize = (size, sizeLimit) => {
 
   return size > computedSize;
 };
+
+export const rpx2px = (rpx) => Math.floor((systemInfo.windowWidth * rpx) / 750);

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

@@ -488,6 +488,7 @@ exports[`date-time-picker :base 1`] = `
                 />
                 <wx-view
                   class="t-picker__indicator"
+                  style="height: 44px"
                 />
               </wx-view>
             </wx-view>

src/picker-item/picker-item.less

@@ -3,7 +3,6 @@
 @picker: ~'@{prefix}-picker';
 @item: ~'@{picker}-item';
 @picker-group-height: var(--td-picker-group-height, 400rpx);
-@picker-item-height: var(--td-picker-item-height, 80rpx);
 @picker-item-color: var(--td-picker-item-color, @text-color-secondary);
 @picker-item-active-color: var(--td-picker-item-active-color, @text-color-primary);
 @picker-item-font-size: var(--td-picker-item-font-size, @font-size-m);

src/picker-item/picker-item.ts

@@ -5,13 +5,8 @@ import props from './props';
 const { prefix } = config;
 const name = `${prefix}-picker-item`;
 
-const itemHeight = 80;
 const DefaultDuration = 240;
 
-const { windowWidth } = wx.getSystemInfoSync();
-
-const rpx2px = (rpx) => Math.floor((windowWidth * rpx) / 750);
-
 const range = function (num: number, min: number, max: number) {
   return Math.min(Math.max(num, min), max);
 };
@@ -54,7 +49,13 @@ export default class PickerItem extends SuperComponent {
     columnIndex: 0,
     labelAlias: 'label',
     valueAlias: 'value',
-    pickItemHeight: rpx2px(itemHeight),
+  };
+
+  lifetimes = {
+    created() {
+      this.StartY = 0;
+      this.StartOffset = 0;
+    },
   };
 
   methods = {
@@ -65,30 +66,31 @@ export default class PickerItem extends SuperComponent {
     },
 
     onTouchMove(event) {
-      const { StartY, StartOffset, itemHeight } = this;
+      const { pickItemHeight } = this.data;
+      const { StartY, StartOffset } = this;
 
       // touch偏移增量
       const touchDeltaY = event.touches[0].clientY - StartY;
-      const deltaY = this.calculateViewDeltaY(touchDeltaY);
+      const deltaY = this.calculateViewDeltaY(touchDeltaY, pickItemHeight);
 
       this.setData({
-        offset: range(StartOffset + deltaY, -(this.getCount() * itemHeight), 0),
+        offset: range(StartOffset + deltaY, -(this.getCount() * pickItemHeight), 0),
         duration: DefaultDuration,
       });
     },
 
     onTouchEnd() {
-      const { offset, labelAlias, valueAlias, columnIndex } = this.data;
+      const { offset, labelAlias, valueAlias, columnIndex, pickItemHeight } = this.data;
       const { options } = this.properties;
 
       if (offset === this.StartOffset) {
         return;
       }
       // 调整偏移量
-      const index = range(Math.round(-offset / this.itemHeight), 0, this.getCount() - 1);
+      const index = range(Math.round(-offset / pickItemHeight), 0, this.getCount() - 1);
       this.setData({
         curIndex: index,
-        offset: -index * this.itemHeight,
+        offset: -index * pickItemHeight,
       });
 
       if (index === this._selectedIndex) {
@@ -108,13 +110,13 @@ export default class PickerItem extends SuperComponent {
 
     // 刷新选中状态
     update() {
-      const { options, value, labelAlias, valueAlias } = this.data;
+      const { options, value, labelAlias, valueAlias, pickItemHeight } = this.data;
 
       const index = options.findIndex((item) => item[valueAlias] === value);
       const selectedIndex = index > 0 ? index : 0;
 
       this.setData({
-        offset: -selectedIndex * this.itemHeight,
+        offset: -selectedIndex * pickItemHeight,
         curIndex: selectedIndex,
       });
 
@@ -136,13 +138,7 @@ export default class PickerItem extends SuperComponent {
    * 将屏幕滑动距离换算为视图偏移量 模拟渐进式滚动
    * @param touchDeltaY 屏幕滑动距离
    */
-  calculateViewDeltaY(touchDeltaY: number): number {
+  calculateViewDeltaY(touchDeltaY: number, itemHeight: number): number {
     return Math.abs(touchDeltaY) > itemHeight ? 1.2 * touchDeltaY : touchDeltaY;
   }
-
-  created() {
-    this.StartY = 0;
-    this.StartOffset = 0;
-    this.itemHeight = rpx2px(itemHeight);
-  }
 }

src/picker/README.en-US.md

@@ -13,6 +13,7 @@ cancel-btn | String / Boolean / Object | true | Typescript：`boolean \| string
 confirm-btn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+item-height | Number | 80 | \- | N
 keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 popup-props | Object | {} | popup properties。Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 title | String | '' | \- | N

src/picker/README.md

@@ -62,6 +62,7 @@ cancel-btn | String / Boolean / Object | true | 取消按钮文字。TS 类型
 confirm-btn | String / Boolean / Object | true | 确定按钮文字。TS 类型：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 footer | Slot | - | 底部内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+item-height | Number | 80 | PickerItem 的子项高度，单位 rpx | N
 keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 popup-props | Object | {} | 透传 `Popup` 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 title | String | '' | 标题 | N
@@ -114,4 +115,4 @@ options | Array | [] | 数据源。TS 类型：`PickerItemOption[]` `interface P
 --td-picker-item-active-color | @font-gray-1 | - 
 --td-picker-item-color | @font-gray-2 | - 
 --td-picker-item-font-size | @font-size-m | -
---td-picker-item-height | 80rpx | -
+--td-picker-item-height | 80rpx | 已废弃，建议使用 `itemHeight` 属性设置子项高度。

src/picker/__test__/__snapshots__/index.test.js.snap

@@ -155,6 +155,7 @@ exports[`picker :base 1`] = `
             />
             <wx-view
               class="t-picker__indicator"
+              style="height: 44px"
             />
           </wx-view>
         </wx-view>

src/picker/picker.less

@@ -1,4 +1,3 @@
-// @import (css) '../common/index.wxss';
 @import '../common/style/index.less';
 
 @picker: ~'@{prefix}-picker';
@@ -15,7 +14,6 @@
 @picker-title-line-height: var(--td-picker-title-line-height, 52rpx);
 @picker-title-color: var(--td-picker-title-color, @text-color-primary);
 
-@picker-item-height: var(--td-picker-item-height, 80rpx);
 @picker-bg-color: var(--td-picker-bg-color, @bg-color-container);
 @picker-mask-color-top: var(--td-picker-mask-color-top, hsla(0, 0%, 100%, 0.92));
 @picker-mask-color-bottom: var(--td-picker-mask-color-bottom, hsla(0, 0%, 100%, 0.4));
@@ -98,7 +96,6 @@
   }
 
   &__indicator {
-    height: @picker-item-height;
     position: absolute;
     left: 32rpx;
     right: 32rpx;

src/picker/picker.ts

@@ -1,4 +1,5 @@
 import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/index';
+import { rpx2px } from '../common/utils';
 import config from '../common/config';
 import props from './props';
 import useCustomNavbar from '../mixins/using-custom-navbar';
@@ -39,23 +40,34 @@ export default class Picker extends SuperComponent {
     },
   };
 
+  lifetimes = {
+    attached() {
+      this.setData({
+        pickItemHeight: rpx2px(this.properties.itemHeight),
+      });
+    },
+  };
+
   data = {
     prefix,
     classPrefix: name,
     labelAlias: 'label',
     valueAlias: 'value',
     defaultPopUpProps: {},
     defaultPopUpzIndex: 11500,
+    pickItemHeight: 0,
   };
 
   methods = {
     updateChildren() {
+      const { pickItemHeight } = this.data;
       const { value, defaultValue } = this.properties;
 
       this.$children.forEach((child, index) => {
         child.setData({
           value: value?.[index] ?? defaultValue?.[index] ?? '',
           columnIndex: index,
+          pickItemHeight,
         });
         child.update();
       });

src/picker/props.ts

@@ -26,6 +26,11 @@ const props: TdPickerProps = {
     type: Boolean,
     value: true,
   },
+  /** PickerItem 的子项高度，单位 rpx */
+  itemHeight: {
+    type: Number,
+    value: 80,
+  },
   /** 用来定义 value / label 在 `options` 中对应的字段别名 */
   keys: {
     type: Object,
@@ -45,6 +50,11 @@ const props: TdPickerProps = {
     type: Boolean,
     value: true,
   },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: {
+    type: Boolean,
+    value: false,
+  },
   /** 选中值 */
   value: {
     type: Array,

src/picker/template.wxml

@@ -15,7 +15,7 @@
     <slot />
     <view class="{{classPrefix}}__mask {{classPrefix}}__mask--top" />
     <view class="{{classPrefix}}__mask {{classPrefix}}__mask--bottom" />
-    <view class="{{classPrefix}}__indicator"></view>
+    <view class="{{classPrefix}}__indicator" style="height: {{pickItemHeight}}px"> </view>
   </view>
   <slot name="footer" />
 </view>

src/picker/type.ts

@@ -41,6 +41,14 @@ export interface TdPickerProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * PickerItem 的子项高度，单位 rpx
+   * @default 80
+   */
+  itemHeight?: {
+    type: NumberConstructor;
+    value?: number;
+  };
   /**
    * 用来定义 value / label 在 `options` 中对应的字段别名
    */