antd-mini/less/IndexBar/index.js

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

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 });
            });
        },
    },
});