178 lines
6.8 KiB
JavaScript
178 lines
6.8 KiB
JavaScript
import { __awaiter, __generator } from "tslib";
|
||
import equal from 'fast-deep-equal';
|
||
import { IndexBarDefaultProps } from './props';
|
||
Component({
|
||
props: IndexBarDefaultProps,
|
||
data: {
|
||
touchClientY: 0,
|
||
touchKeyIndex: -1,
|
||
touchKey: '',
|
||
itemHeight: 16,
|
||
moving: false,
|
||
showMask: false,
|
||
currentKey: 0,
|
||
topRange: [],
|
||
hasDefaultSlot: true,
|
||
},
|
||
didMount: function () {
|
||
this.init();
|
||
},
|
||
didUpdate: function (_prop) {
|
||
var _a = this.props, current = _a.current, items = _a.items;
|
||
if (!equal(_prop.items, this.props.items)) {
|
||
this.init();
|
||
}
|
||
if (_prop.current !== current) {
|
||
var _index = items.findIndex(function (u) { return current === u.label; });
|
||
this.setData({
|
||
currentKey: _index,
|
||
});
|
||
if (!this.isControlled()) {
|
||
this.setData({
|
||
touchKeyIndex: _index,
|
||
touchKey: current,
|
||
});
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
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;
|
||
},
|
||
// 初始化每个块的高度，用已计算滑动距离
|
||
initItemHeight: function () {
|
||
var _this = this;
|
||
my.createSelectorQuery()
|
||
.select("#ant-alphabet-0")
|
||
.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) {
|
||
return __awaiter(this, void 0, void 0, function () {
|
||
var _a, vibrate, onChange, _b;
|
||
return __generator(this, function (_c) {
|
||
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
|
||
var newIndex = isUp
|
||
? touchKeyIndex - movingNum
|
||
: touchKeyIndex + movingNum;
|
||
// 超出索引列表范围 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;
|
||
var newIndex = 0;
|
||
if (scrollTop + 1 > topRange[topRange.length - 1]) {
|
||
newIndex = topRange.length;
|
||
}
|
||
else {
|
||
newIndex = topRange.findIndex(function (h) { return scrollTop + 1 < h; });
|
||
}
|
||
if (currentKey !== newIndex - 1 && newIndex - 1 >= 0 && !moving) {
|
||
this.setData({
|
||
currentKey: newIndex - 1,
|
||
touchKeyIndex: newIndex - 1,
|
||
touchKey: items[newIndex - 1].label,
|
||
});
|
||
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 });
|
||
});
|
||
},
|
||
},
|
||
});
|