140 lines
5.6 KiB
JavaScript
140 lines
5.6 KiB
JavaScript
|
"use strict";
|
|||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|||
|
|
var tslib_1 = require("tslib");
|
|||
|
|
var props_1 = require("./props");
|
|||
|
|
Component({
|
|||
|
|
props: props_1.IndexBarDefaultProps,
|
|||
|
|
data: {
|
|||
|
|
touchClientY: 0,
|
|||
|
|
touchKeyIndex: -1,
|
|||
|
|
touchKey: '',
|
|||
|
|
itemHeight: 16,
|
|||
|
|
moving: false,
|
|||
|
|
showMask: false,
|
|||
|
|
currentKey: 0,
|
|||
|
|
topRange: [],
|
|||
|
|
hasDefaultSlot: true,
|
|||
|
|
},
|
|||
|
|
didMount: function () {
|
|||
|
|
var _a = this.props, defaultCurrent = _a.defaultCurrent, items = _a.items;
|
|||
|
|
this.initItemHeight();
|
|||
|
|
this.initTopRange();
|
|||
|
|
var _index = items.findIndex(function (u) { return defaultCurrent === u.label; });
|
|||
|
|
this.setData({ currentKey: _index });
|
|||
|
|
},
|
|||
|
|
didUpdate: function (_prop) {
|
|||
|
|
var _a = this.props, current = _a.current, items = _a.items;
|
|||
|
|
if (_prop.current !== current) {
|
|||
|
|
var _index = items.findIndex(function (u) { return current === u.label; });
|
|||
|
|
this.setData({ currentKey: _index });
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 初始化每个块的高度，用已计算滑动距离
|
|||
|
|
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 tslib_1.__awaiter(this, void 0, void 0, function () {
|
|||
|
|
var _a, vibrate, onChange, _b;
|
|||
|
|
return tslib_1.__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 = topRange.findIndex(function (h) { return scrollTop + 1 < h; });
|
|||
|
|
if (currentKey !== newIndex - 1 && newIndex - 1 >= 0 && !moving) {
|
|||
|
|
this.setData({ currentKey: newIndex - 1 });
|
|||
|
|
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 });
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|