index.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. import { __awaiter, __generator } from "tslib";
  2. import { IndexBarDefaultProps } from './props';
  3. import '../_util/assert-component2';
  4. Component({
  5. props: IndexBarDefaultProps,
  6. data: {
  7. touchClientY: 0,
  8. touchKeyIndex: -1,
  9. touchKey: '',
  10. itemHeight: 16,
  11. moving: false,
  12. showMask: false,
  13. currentKey: 0,
  14. topRange: [],
  15. hasDefaultSlot: true,
  16. },
  17. didMount: function () {
  18. var _a = this.props, defaultCurrent = _a.defaultCurrent, items = _a.items;
  19. this.initItemHeight();
  20. this.initTopRange();
  21. var _index = items.findIndex(function (u) { return defaultCurrent === u.label; });
  22. this.setData({ currentKey: _index });
  23. },
  24. didUpdate: function (_prop) {
  25. var _a = this.props, current = _a.current, items = _a.items;
  26. if (_prop.current !== current) {
  27. var _index = items.findIndex(function (u) { return current === u.label; });
  28. this.setData({ currentKey: _index });
  29. }
  30. },
  31. methods: {
  32. // 初始化每个块的高度,用已计算滑动距离
  33. initItemHeight: function () {
  34. var _this = this;
  35. my.createSelectorQuery()
  36. .select("#ant-alphabet-0")
  37. .boundingClientRect()
  38. .exec(function (ret) {
  39. if (ret[0] === null)
  40. throw new Error('找不到Indexbar元素');
  41. var height = ret[0].height;
  42. _this.setData({ itemHeight: height });
  43. });
  44. },
  45. onTouchStart: function (e) {
  46. var moving = this.data.moving;
  47. var items = this.props.items;
  48. if (moving)
  49. return;
  50. var _a = e.target.dataset.item, item = _a.item, index = _a.index;
  51. var point = (e && e.touches && e.touches[0]) || {};
  52. var clientY = point.clientY;
  53. this.setData({
  54. touchClientY: clientY,
  55. touchKeyIndex: index,
  56. touchKey: items[index].label,
  57. moving: true,
  58. showMask: true,
  59. currentKey: index,
  60. });
  61. this.onAlphabetClick(item, index); // 触摸开始
  62. },
  63. onAlphabetClick: function (item, index) {
  64. return __awaiter(this, void 0, void 0, function () {
  65. var _a, vibrate, onChange, _b;
  66. return __generator(this, function (_c) {
  67. switch (_c.label) {
  68. case 0:
  69. _a = this.props, vibrate = _a.vibrate, onChange = _a.onChange;
  70. _b = vibrate;
  71. if (!_b) return [3 /*break*/, 2];
  72. return [4 /*yield*/, my.vibrateShort()];
  73. case 1:
  74. _b = (_c.sent());
  75. _c.label = 2;
  76. case 2:
  77. _b;
  78. onChange(item, index);
  79. return [2 /*return*/];
  80. }
  81. });
  82. });
  83. },
  84. onTouchEnd: function () {
  85. // 没进入moving状态就不处理
  86. if (!this.data.moving)
  87. return;
  88. this.setData({
  89. touchKeyIndex: -1,
  90. touchKey: '',
  91. showMask: false,
  92. moving: false,
  93. });
  94. },
  95. onTouchMove: function (e) {
  96. var _a = this.data, touchClientY = _a.touchClientY, touchKeyIndex = _a.touchKeyIndex, itemHeight = _a.itemHeight, touchKey = _a.touchKey;
  97. var items = this.props.items;
  98. var point = e.changedTouches[0];
  99. var movePageY = point.clientY;
  100. // 滑动距离
  101. var movingHeight = Math.abs(movePageY - touchClientY);
  102. // 滑动几个itemHeight的距离即等于滑动了几格,不那么精准,但是几乎可以忽略不计
  103. var movingNum = parseInt("".concat(movingHeight / itemHeight), 10);
  104. // 上 or 下
  105. var isUp = movePageY < touchClientY;
  106. // 新的触发的索引应该在哪个index
  107. var newIndex = isUp
  108. ? touchKeyIndex - movingNum
  109. : touchKeyIndex + movingNum;
  110. // 超出索引列表范围 or 索引没变化return
  111. if (!items[newIndex] || touchKey === items[newIndex].label)
  112. return;
  113. // 结算
  114. this.setData({ touchKey: items[newIndex].label, currentKey: newIndex });
  115. this.onAlphabetClick(items[newIndex], newIndex);
  116. },
  117. onScroll: function (e) {
  118. var _a = this.data, topRange = _a.topRange, currentKey = _a.currentKey, moving = _a.moving;
  119. var items = this.props.items;
  120. var scrollTop = e.detail.scrollTop;
  121. var newIndex = 0;
  122. if (scrollTop + 1 > topRange[topRange.length - 1]) {
  123. newIndex = topRange.length;
  124. }
  125. else {
  126. newIndex = topRange.findIndex(function (h) { return scrollTop + 1 < h; });
  127. }
  128. if (currentKey !== newIndex - 1 && newIndex - 1 >= 0 && !moving) {
  129. this.setData({ currentKey: newIndex - 1 });
  130. this.onAlphabetClick(items[newIndex - 1], newIndex - 1);
  131. }
  132. },
  133. initTopRange: function () {
  134. var _this = this;
  135. my.createSelectorQuery()
  136. .selectAll('.ant-indexbar-side-list')
  137. .boundingClientRect()
  138. .exec(function (ret) {
  139. var arr = [];
  140. ret[0].forEach(function (u) {
  141. arr.push(u.top - ret[0][0].top);
  142. });
  143. _this.setData({ topRange: arr, hasDefaultSlot: !!ret[0][0].height });
  144. });
  145. },
  146. },
  147. });