123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- import { __awaiter, __generator } from "tslib";
- import { IndexBarDefaultProps } from './props';
- import '../_util/assert-component2';
- Component({
- props: 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 __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 });
- 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 });
- });
- },
- },
- });
|