2024-12-01 11:56:54 +00:00
|
|
|
|
import { __awaiter, __generator } from "tslib";
|
|
|
|
|
import equal from 'fast-deep-equal';
|
|
|
|
|
import { IndexBarDefaultProps } from './props';
|
2024-11-10 07:01:22 +00:00
|
|
|
|
Component({
|
2024-12-01 11:56:54 +00:00
|
|
|
|
props: IndexBarDefaultProps,
|
2024-11-10 07:01:22 +00:00
|
|
|
|
data: {
|
|
|
|
|
touchClientY: 0,
|
|
|
|
|
touchKeyIndex: -1,
|
|
|
|
|
touchKey: '',
|
|
|
|
|
itemHeight: 16,
|
|
|
|
|
moving: false,
|
|
|
|
|
showMask: false,
|
|
|
|
|
currentKey: 0,
|
|
|
|
|
topRange: [],
|
|
|
|
|
hasDefaultSlot: true,
|
|
|
|
|
},
|
|
|
|
|
didMount: function () {
|
2024-12-01 11:56:54 +00:00
|
|
|
|
this.init();
|
2024-11-10 07:01:22 +00:00
|
|
|
|
},
|
|
|
|
|
didUpdate: function (_prop) {
|
|
|
|
|
var _a = this.props, current = _a.current, items = _a.items;
|
2024-12-01 11:56:54 +00:00
|
|
|
|
if (!equal(_prop.items, this.props.items)) {
|
|
|
|
|
this.init();
|
|
|
|
|
}
|
2024-11-10 07:01:22 +00:00
|
|
|
|
if (_prop.current !== current) {
|
|
|
|
|
var _index = items.findIndex(function (u) { return current === u.label; });
|
2024-12-01 11:56:54 +00:00
|
|
|
|
this.setData({
|
|
|
|
|
currentKey: _index,
|
|
|
|
|
});
|
|
|
|
|
if (!this.isControlled()) {
|
|
|
|
|
this.setData({
|
|
|
|
|
touchKeyIndex: _index,
|
|
|
|
|
touchKey: current,
|
|
|
|
|
});
|
|
|
|
|
}
|
2024-11-10 07:01:22 +00:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
2024-12-01 11:56:54 +00:00
|
|
|
|
init: function () {
|
|
|
|
|
var _a = this.props, defaultCurrent = _a.defaultCurrent, current = _a.current, items = _a.items;
|
|
|
|
|
this.initItemHeight();
|
|
|
|
|
this.initTopRange();
|
|
|
|
|
var initCurrent = this.isControlled() ? current : defaultCurrent;
|
|
|
|
|
var _index = items.findIndex(function (u) { return initCurrent === u.label; });
|
|
|
|
|
this.setData({
|
|
|
|
|
currentKey: _index,
|
|
|
|
|
touchKeyIndex: _index,
|
|
|
|
|
touchKey: initCurrent,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
isControlled: function (valueKey) {
|
|
|
|
|
if (valueKey === void 0) { valueKey = 'current'; }
|
|
|
|
|
if ('controlled' in this.props) {
|
|
|
|
|
return this.props.controlled;
|
|
|
|
|
}
|
|
|
|
|
return valueKey in this.props;
|
|
|
|
|
},
|
2024-11-10 07:01:22 +00:00
|
|
|
|
// 初始化每个块的高度,用已计算滑动距离
|
|
|
|
|
initItemHeight: function () {
|
|
|
|
|
var _this = this;
|
|
|
|
|
my.createSelectorQuery()
|
2024-12-01 11:56:54 +00:00
|
|
|
|
.select("#ant-alphabet-0")
|
2024-11-10 07:01:22 +00:00
|
|
|
|
.boundingClientRect()
|
|
|
|
|
.exec(function (ret) {
|
|
|
|
|
if (ret[0] === null)
|
|
|
|
|
throw new Error('找不到Indexbar元素');
|
|
|
|
|
var height = ret[0].height;
|
|
|
|
|
_this.setData({ itemHeight: height });
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
onTouchStart: function (e) {
|
|
|
|
|
var moving = this.data.moving;
|
|
|
|
|
var items = this.props.items;
|
|
|
|
|
if (moving)
|
|
|
|
|
return;
|
|
|
|
|
var _a = e.target.dataset.item, item = _a.item, index = _a.index;
|
|
|
|
|
var point = (e && e.touches && e.touches[0]) || {};
|
|
|
|
|
var clientY = point.clientY;
|
|
|
|
|
this.setData({
|
|
|
|
|
touchClientY: clientY,
|
|
|
|
|
touchKeyIndex: index,
|
|
|
|
|
touchKey: items[index].label,
|
|
|
|
|
moving: true,
|
|
|
|
|
showMask: true,
|
|
|
|
|
currentKey: index,
|
|
|
|
|
});
|
|
|
|
|
this.onAlphabetClick(item, index); // 触摸开始
|
|
|
|
|
},
|
|
|
|
|
onAlphabetClick: function (item, index) {
|
2024-12-01 11:56:54 +00:00
|
|
|
|
return __awaiter(this, void 0, void 0, function () {
|
2024-11-10 07:01:22 +00:00
|
|
|
|
var _a, vibrate, onChange, _b;
|
2024-12-01 11:56:54 +00:00
|
|
|
|
return __generator(this, function (_c) {
|
2024-11-10 07:01:22 +00:00
|
|
|
|
switch (_c.label) {
|
|
|
|
|
case 0:
|
|
|
|
|
_a = this.props, vibrate = _a.vibrate, onChange = _a.onChange;
|
|
|
|
|
_b = vibrate;
|
|
|
|
|
if (!_b) return [3 /*break*/, 2];
|
|
|
|
|
return [4 /*yield*/, my.vibrateShort()];
|
|
|
|
|
case 1:
|
|
|
|
|
_b = (_c.sent());
|
|
|
|
|
_c.label = 2;
|
|
|
|
|
case 2:
|
|
|
|
|
_b;
|
|
|
|
|
onChange(item, index);
|
|
|
|
|
return [2 /*return*/];
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
onTouchEnd: function () {
|
|
|
|
|
// 没进入moving状态就不处理
|
|
|
|
|
if (!this.data.moving)
|
|
|
|
|
return;
|
|
|
|
|
this.setData({
|
|
|
|
|
touchKeyIndex: -1,
|
|
|
|
|
touchKey: '',
|
|
|
|
|
showMask: false,
|
|
|
|
|
moving: false,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
onTouchMove: function (e) {
|
|
|
|
|
var _a = this.data, touchClientY = _a.touchClientY, touchKeyIndex = _a.touchKeyIndex, itemHeight = _a.itemHeight, touchKey = _a.touchKey;
|
|
|
|
|
var items = this.props.items;
|
|
|
|
|
var point = e.changedTouches[0];
|
|
|
|
|
var movePageY = point.clientY;
|
|
|
|
|
// 滑动距离
|
|
|
|
|
var movingHeight = Math.abs(movePageY - touchClientY);
|
|
|
|
|
// 滑动几个itemHeight的距离即等于滑动了几格,不那么精准,但是几乎可以忽略不计
|
|
|
|
|
var movingNum = parseInt("".concat(movingHeight / itemHeight), 10);
|
|
|
|
|
// 上 or 下
|
|
|
|
|
var isUp = movePageY < touchClientY;
|
|
|
|
|
// 新的触发的索引应该在哪个index
|
2024-12-01 11:56:54 +00:00
|
|
|
|
var newIndex = isUp
|
|
|
|
|
? touchKeyIndex - movingNum
|
|
|
|
|
: touchKeyIndex + movingNum;
|
2024-11-10 07:01:22 +00:00
|
|
|
|
// 超出索引列表范围 or 索引没变化return
|
|
|
|
|
if (!items[newIndex] || touchKey === items[newIndex].label)
|
|
|
|
|
return;
|
|
|
|
|
// 结算
|
|
|
|
|
this.setData({ touchKey: items[newIndex].label, currentKey: newIndex });
|
|
|
|
|
this.onAlphabetClick(items[newIndex], newIndex);
|
|
|
|
|
},
|
|
|
|
|
onScroll: function (e) {
|
|
|
|
|
var _a = this.data, topRange = _a.topRange, currentKey = _a.currentKey, moving = _a.moving;
|
|
|
|
|
var items = this.props.items;
|
|
|
|
|
var scrollTop = e.detail.scrollTop;
|
2024-12-01 11:56:54 +00:00
|
|
|
|
var newIndex = 0;
|
|
|
|
|
if (scrollTop + 1 > topRange[topRange.length - 1]) {
|
|
|
|
|
newIndex = topRange.length;
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
newIndex = topRange.findIndex(function (h) { return scrollTop + 1 < h; });
|
|
|
|
|
}
|
2024-11-10 07:01:22 +00:00
|
|
|
|
if (currentKey !== newIndex - 1 && newIndex - 1 >= 0 && !moving) {
|
2024-12-01 11:56:54 +00:00
|
|
|
|
this.setData({
|
|
|
|
|
currentKey: newIndex - 1,
|
|
|
|
|
touchKeyIndex: newIndex - 1,
|
|
|
|
|
touchKey: items[newIndex - 1].label,
|
|
|
|
|
});
|
2024-11-10 07:01:22 +00:00
|
|
|
|
this.onAlphabetClick(items[newIndex - 1], newIndex - 1);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
initTopRange: function () {
|
|
|
|
|
var _this = this;
|
|
|
|
|
my.createSelectorQuery()
|
|
|
|
|
.selectAll('.ant-indexbar-side-list')
|
|
|
|
|
.boundingClientRect()
|
|
|
|
|
.exec(function (ret) {
|
|
|
|
|
var arr = [];
|
|
|
|
|
ret[0].forEach(function (u) {
|
|
|
|
|
arr.push(u.top - ret[0][0].top);
|
|
|
|
|
});
|
|
|
|
|
_this.setData({ topRange: arr, hasDefaultSlot: !!ret[0][0].height });
|
|
|
|
|
});
|
2024-12-01 11:56:54 +00:00
|
|
|
|
},
|
2024-11-10 07:01:22 +00:00
|
|
|
|
},
|
2024-12-01 11:56:54 +00:00
|
|
|
|
});
|