diff --git a/src/common/utils.ts b/src/common/utils.ts
index 23d7cccbd..48f837074 100644
--- a/src/common/utils.ts
+++ b/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);
diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
index 0246c0db4..68e22368d 100644
--- a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
@@ -488,6 +488,7 @@ exports[`date-time-picker :base 1`] = `
/>
diff --git a/src/picker-item/picker-item.less b/src/picker-item/picker-item.less
index 460c8214c..a4fa6c3fd 100644
--- a/src/picker-item/picker-item.less
+++ b/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);
diff --git a/src/picker-item/picker-item.ts b/src/picker-item/picker-item.ts
index afea22877..92e255100 100644
--- a/src/picker-item/picker-item.ts
+++ b/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);
- }
}
diff --git a/src/picker/README.en-US.md b/src/picker/README.en-US.md
index 48fd57c1c..d02c1a0f0 100644
--- a/src/picker/README.en-US.md
+++ b/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
diff --git a/src/picker/README.md b/src/picker/README.md
index 325831986..5646235f0 100644
--- a/src/picker/README.md
+++ b/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 | -
\ No newline at end of file
+--td-picker-item-height | 80rpx | 已废弃,建议使用 `itemHeight` 属性设置子项高度。
\ No newline at end of file
diff --git a/src/picker/__test__/__snapshots__/index.test.js.snap b/src/picker/__test__/__snapshots__/index.test.js.snap
index 780a43179..5250950c1 100644
--- a/src/picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/picker/__test__/__snapshots__/index.test.js.snap
@@ -155,6 +155,7 @@ exports[`picker :base 1`] = `
/>
diff --git a/src/picker/picker.less b/src/picker/picker.less
index 68a217b79..0cdbe1589 100644
--- a/src/picker/picker.less
+++ b/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;
diff --git a/src/picker/picker.ts b/src/picker/picker.ts
index cce276e33..1ea4efb9b 100644
--- a/src/picker/picker.ts
+++ b/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,6 +40,14 @@ export default class Picker extends SuperComponent {
},
};
+ lifetimes = {
+ attached() {
+ this.setData({
+ pickItemHeight: rpx2px(this.properties.itemHeight),
+ });
+ },
+ };
+
data = {
prefix,
classPrefix: name,
@@ -46,16 +55,19 @@ export default class Picker extends SuperComponent {
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();
});
diff --git a/src/picker/props.ts b/src/picker/props.ts
index d27716d86..3110e6a42 100644
--- a/src/picker/props.ts
+++ b/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,
diff --git a/src/picker/template.wxml b/src/picker/template.wxml
index 85f266293..354830cec 100644
--- a/src/picker/template.wxml
+++ b/src/picker/template.wxml
@@ -15,7 +15,7 @@
-
+
diff --git a/src/picker/type.ts b/src/picker/type.ts
index 4c79c0266..5668b38ef 100644
--- a/src/picker/type.ts
+++ b/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` 中对应的字段别名
*/