0

「プルダウンして更新」を実装しようとして、次の簡単なテスト コードを作成しました (新しい Flash Builder プロジェクトに「空白の」テンプレートを使用して、つまり navbar を使用せずに追加してください)。

スクリーンショット:

ここに画像の説明を入力

TestPull.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    applicationComplete="init()">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.PropertyChangeEvent;

            private static const PADDING:uint = 20;

            [Bindable]
            private var _ac:ArrayCollection = new ArrayCollection();

            private function init():void {
                updateList();
                _list.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handleScroll);
            }

            private function updateList():void {
                _ac.source = new Array();
                for (var i:int = 0; i < 42; i++) {
                    _ac.source.push(Math.random());
                }
                _ac.refresh();
            }

            private function handleScroll(e:PropertyChangeEvent):void {
                if (e.source == e.target && e.property == "verticalScrollPosition") {
                    trace(e.property, ': ', e.oldValue, ' -> ', e.newValue);
                    if (e.newValue < -2 * PADDING && 
                        e.oldValue >= -2 * PADDING) {
                        _hint.visible = true;
                        setTimeout(hideHint, 2000);
                        //updateList();
                    }
                }
            }

            private function hideHint():void {
                _hint.visible = false;
            }
        ]]>
    </fx:Script>

    <s:List id="_list"
            dataProvider="{_ac}"
            width="100%" 
            height="100%" />

    <s:Label id="_hint"
             text="Pull down to refresh..."
             width="100%"
             textAlign="center"
             fontStyle="italic"
             backgroundColor="#FFFFCC"
             paddingTop="{PADDING}"
             paddingBottom="{PADDING}"
             visible="false" />
</s:Application>

これはうまく機能しているようで、_hint可視性はプルごとに 1 回だけ切り替えられます (これはトレースで確認しました)。

ただし、上記の呼び出しのコメントを外すupdateList()と (Web サーバーからのデータ フェッチをシミュレートします)、すべてが壊れ、 が何hint.visible=true度も設定され、_listちらつきます。

私のかわいそうな男の引っ張りをリフレッシュする方法を修正する方法を誰か提案してください。

4

1 に答える 1

1

私はMichaël CHAIZEのブログエントリに基づいて、このソリューションに行き着きました:

ここに画像の説明を入力

TestPull.mxml (新しい Flex Mobile プロジェクトに追加):

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    applicationComplete="init()">

    <fx:Declarations>
        <s:ArrayCollection id="_ac"/>
        <s:Fade id="_fadeIn" duration="500" alphaFrom="0" alphaTo="1" />
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.events.PropertyChangeEvent;

            private static const PADDING:uint = 20;

            private function init():void {
                updateList();
                _list.dataGroup.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handleScroll);
            }

            private function handleScroll(event:PropertyChangeEvent):void {
                if (_busy.visible || 
                    event.source != event.target || 
                    event.property != 'verticalScrollPosition') {
                    return;
                }

                if (event.newValue < -3 * PADDING && 
                    event.oldValue >= -3 * PADDING) {
                    _hintDown.visible = true;
                    _hintUp.visible = false;
                    _fadeIn.play([_hintDown]);
                } else if (event.newValue < -6 * PADDING && 
                           event.oldValue >= -6 * PADDING) {
                    _hintDown.visible = false;
                    _hintUp.visible = true;
                    _fadeIn.play([_hintUp]);
                } else if (event.newValue >= -6 * PADDING && 
                           event.oldValue < -6 * PADDING) {
                    _hintDown.visible = true;
                    _hintUp.visible = false;
                    _fadeIn.play([_hintDown]);
                } else if (event.newValue >= -3 * PADDING && 
                           event.oldValue < -3 * PADDING) {
                    _hintDown.visible = false;
                    _hintUp.visible = false;
                }
            }

            private function startLoading(event:MouseEvent):void {
                if (_hintUp.visible) {
                    _busy.includeInLayout = _busy.visible = true;
                    setTimeout(updateList, 5000);
                }
                _hintDown.visible = false;
                _hintUp.visible = false;
            }

            private function updateList():void {
                _ac.source = new Array();
                for (var i:int = 0; i < 42; i++) {
                    _ac.source.push(Math.random());
                }
                _ac.refresh();
                _busy.includeInLayout = _busy.visible = false;
            }

        ]]>
    </fx:Script>

    <s:VGroup width="100%">
        <s:HGroup id="_busy"
                  verticalAlign="baseline"
                  includeInLayout="false" 
                  visible="false">
            <s:BusyIndicator />
            <s:Label text="Loading data..." />
        </s:HGroup>

        <s:List id="_list"
                width="100%"
                contentBackgroundColor="#FFFFFF"
                dataProvider="{_ac}"
                mouseUp="startLoading(event)" />
    </s:VGroup>

    <s:Label id="_hintDown"
             text="↓ Pull down to refresh... ↓"
             width="100%"
             textAlign="center"
             paddingTop="{PADDING}"
             visible="false" />

    <s:Label id="_hintUp"
             text="↑ Release to refresh... ↑"
             width="100%"
             textAlign="center"
             paddingTop="{PADDING}"
             visible="false" />

</s:Application>
于 2013-02-26T10:22:25.943 に答える