picker-column.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { SuperComponent, wxComponent } from '../common/src/index';
  8. import config from '../common/config';
  9. import props from './picker-item-props';
  10. const itemHeight = 80;
  11. const DefaultDuration = 600;
  12. const { windowWidth } = wx.getSystemInfoSync();
  13. const rpx2px = (rpx) => Math.floor((windowWidth * rpx) / 750);
  14. const range = function (num, min, max) {
  15. return Math.min(Math.max(num, min), max);
  16. };
  17. let PickerColumn = class PickerColumn extends SuperComponent {
  18. constructor() {
  19. super(...arguments);
  20. this.relations = {
  21. './picker': {
  22. type: 'parent',
  23. },
  24. };
  25. this.properties = props;
  26. this.observers = {
  27. value() {
  28. this.updateColumns();
  29. },
  30. options() {
  31. this.updateColumns();
  32. },
  33. };
  34. this.data = {
  35. prefix: `${config.prefix}-picker-column`,
  36. offset: 0,
  37. duration: 0, // 滚动动画延迟
  38. };
  39. this.methods = {
  40. onTouchStart(event) {
  41. this.StartY = event.touches[0].clientY;
  42. this.StartOffset = this.data.offset;
  43. this.setData({ duration: 0 });
  44. },
  45. onTouchMove(event) {
  46. const { StartY, StartOffset, itemHeight } = this;
  47. // touch偏移增量
  48. const touchDeltaY = event.touches[0].clientY - StartY;
  49. const deltaY = this.calculateViewDeltaY(touchDeltaY);
  50. this.setData({
  51. offset: range(StartOffset + deltaY, -(this.getCount() * itemHeight), 0),
  52. duration: DefaultDuration,
  53. });
  54. },
  55. onTouchEnd() {
  56. const { offset } = this.data;
  57. const { options } = this.properties;
  58. if (offset === this.StartOffset) {
  59. return;
  60. }
  61. // 调整偏移量
  62. const index = range(Math.round(-offset / this.itemHeight), 0, this.getCount() - 1);
  63. this.setData({
  64. offset: -index * this.itemHeight,
  65. });
  66. if (index === this._selectedIndex) {
  67. return;
  68. }
  69. wx.nextTick(() => {
  70. var _a;
  71. const changeObj = {
  72. index,
  73. value: options[index],
  74. };
  75. this._selectedIndex = index;
  76. this._selectedValue = options[index];
  77. this.triggerEvent('change', changeObj);
  78. const picker = (_a = this.getRelationNodes('./picker')) === null || _a === void 0 ? void 0 : _a[0];
  79. if (picker) {
  80. picker.triggerChange(Object.assign(Object.assign({}, changeObj), { column: this.columnIndex || 0 }));
  81. }
  82. });
  83. },
  84. // 刷新选中状态
  85. updateColumns() {
  86. const { options, value } = this.properties;
  87. const index = options.findIndex((item) => item.value === value);
  88. const selectedIndex = index > 0 ? index : 0;
  89. this.setData({ offset: -selectedIndex * this.itemHeight });
  90. this._selectedIndex = selectedIndex;
  91. this._selectedValue = options[selectedIndex];
  92. },
  93. resetOrigin() {
  94. this.updateColumns();
  95. },
  96. getCount() {
  97. var _a, _b;
  98. return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
  99. },
  100. };
  101. }
  102. /**
  103. * 将屏幕滑动距离换算为视图偏移量 模拟渐进式滚动
  104. * @param touchDeltaY 屏幕滑动距离
  105. */
  106. calculateViewDeltaY(touchDeltaY) {
  107. return Math.abs(touchDeltaY) > itemHeight ? 1.2 * touchDeltaY : touchDeltaY;
  108. }
  109. created() {
  110. this.StartY = 0;
  111. this.StartOffset = 0;
  112. this.itemHeight = rpx2px(itemHeight);
  113. }
  114. };
  115. PickerColumn = __decorate([
  116. wxComponent()
  117. ], PickerColumn);
  118. export default PickerColumn;
  119. //# sourceMappingURL=picker-column.js.map