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` 中对应的字段别名 */