「Egret」7 滑动列表选择器

用于时间,日期,或者其他元素的滑动定位选择

Posted by AF on April 12, 2020

Egret 中简单的滑动列表选择器

1
主要用在类似移动端的日期选择器或者一个列表,需要定位到某个元素位置的情况。

使用系统的eui.sys.TouchScroll组件,覆盖scroll的事件来实现定位滑动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
class ScrollPicker extends egret.EventDispatcher {
    /**
     * scrollPolicy : ScrollPicker.ScrollPolicyH or ScrollPicker.ScrollPolicyV
     */
    constructor(scroll: eui.Scroller, selectedIdx: number, itemSize: number, scrollPolicy: string) {
        super();
        this._scroller = scroll;
        this._group = scroll.viewport as eui.DataGroup;
        this._selectedIdx = selectedIdx;
        this._itemSize = itemSize;
        this._scroller.scrollPolicyH = "off";
        this._scroller.scrollPolicyV = "off";
        this._scrollPolicy = scrollPolicy;
        this.init();
    }

    private _scroller: eui.Scroller;
    private _group: eui.DataGroup;
    private _scrollPolicy: string;
    private _scrollMax: number = 0;
    private _itemSize: number = 200;
    private _touchScroll: eui.sys.TouchScroll;
    private _selectedIdx = 0;
    private _currentSelectIdx = 2;

    public static ScrollPolicyH = "policyH";
    public static ScrollPolicyV = "policyV";

    public getCurrentItem(): any {
        var tmp = this.getScrollValue() / this._itemSize + this._selectedIdx;
        if (tmp >= this._group.dataProvider.length)
            tmp = this._group.dataProvider.length - 1;
        if (tmp < 0)
            tmp = 0;

        var value = this._group.dataProvider.getItemAt(this._currentSelectIdx);
        return value;
    }

    public setCurrentSelected(idx: number) {
        let val = this._itemSize * (idx);
        this._scroller.viewport.scrollV = val;
    }

    private init(): void {
        this._scrollMax = (this._group.dataProvider.length - 1 - this._selectedIdx) * (this._itemSize);
        this._group.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.touchBegin, this);
        this._touchScroll = new eui.sys.TouchScroll(this.updateFunction, this.endFunction, this);
        this._touchScroll.$scrollFactor = 5;
        this._touchScroll.$bounces = false;
        this._scroller.throwSpeed = 0;
    }

    private updateFunction(scrollPos: number): void {
        if (this._scrollPolicy == ScrollPicker.ScrollPolicyH) {
            this._scroller.viewport.scrollH = scrollPos;
        } else {
            this._scroller.viewport.scrollV = scrollPos;
        }
    }

    private endFunction(): void {
        var f = this.getScrollValue() / (this._itemSize);
        var tmp = Math.floor(f);
        var idx = 0;
        if (f - tmp > 0.5) {
            idx = tmp + 1;
        } else {
            idx = tmp;
        }

        var scroll = (this._itemSize) * idx;
        if (this._scrollPolicy == ScrollPicker.ScrollPolicyH) {
            egret.Tween.get(this._scroller.viewport).to({ scrollH: scroll }, 100);
        } else {
            egret.Tween.get(this._scroller.viewport).to({ scrollV: scroll }, 100);
        }
        this._scroller.viewport
        this._currentSelectIdx = idx + this._selectedIdx;
        this.disPatchValueChangeEvent();
    }

    private _lastPosX: number = 0;
    private _lastPosY: number = 0;
    private touchBegin(evt: egret.TouchEvent) {
        this._lastPosX = evt.stageX;
        this._lastPosY = evt.stageY;
        this._touchScroll.stop();
        this._touchScroll.start(this._lastPosY);
        egret.MainContext.instance.stage.addEventListener(egret.TouchEvent.TOUCH_END, this.touchEnd, this);
        egret.MainContext.instance.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.touchMoved, this);
    }

    private touchEnd(event: egret.TouchEvent) {
        if (this._touchScroll.isStarted()) {
            this._touchScroll.finish(this.getScrollValue(), this._scrollMax);
        }
        egret.MainContext.instance.stage.removeEventListener(egret.TouchEvent.TOUCH_END, this.touchEnd, this);
        egret.MainContext.instance.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.touchMoved, this);
    }

    private touchMoved(event: egret.TouchEvent) {
        this._touchScroll.update(event.$stageY, this._scrollMax, this.getScrollValue());
    }

    private disPatchValueChangeEvent() {
        let currentIdx = this.getCurrentItem();
        egret.log("停在了 :" + currentIdx);
    }

    private getScrollValue(): number {
        if (this._scrollPolicy == ScrollPicker.ScrollPolicyH) {
            return this._scroller.viewport.scrollH;
        }
        return this._scroller.viewport.scrollV;
    }
}

avatar



☛兄dei,请我喝杯茶☚