Слайд представлений сплава Appcelerator

Я использую структуру Alloy MVC поверх Titanium и хочу сделать слайд-шоу между представлениями. Когда я прокручиваю экран, я хочу отобразить следующий/предыдущий вид с эффектом слайда справа налево или слева направо. Я использую этот код:

Вкладка в моем index.xml:

<Tab title="Bilan" icon="KS_nav_ui.png">
    <Window title="Bilan" id="bilanTab" onSwipe="doBilanSwipe">
    </Window>
</Tab>

Представление вопроса динамически добавляется и заполняется внутри bilanTab:

<Alloy>
<Collection src="ReponsePossible">
<View id="questionContainer" class="container">
    <Label id="questionText" />
    <Button id="buttonNextQuestion">Question suivante</Button>
</View>
</Alloy>

и две мои функции (3 с prevQuestion здесь не напечатаны) внутри контроллера index.js:

var previousQuestion;
var nextQuestion;

function doBilanSwipe(e){
    if (e.direction == 'left'){
        nextQuestion();
    }
    else if (e.direction == 'right'){
        prevQuestion();
    }
}



function nextQuestion(){
    if (questionsCurrentIndex < questions.length-1){
        questionsCurrentIndex++;
        $.previous = previousQuestion;
        $.next = Alloy.createController('question', questions.at(questionsCurrentIndex));
        nextQuestion = $.next;
        $.next.questionContainer.left = 320;
        $.bilanTab.add($.next.questionContainer);
        $.next.questionContainer.animate({left:0, duration:200});
        $.previous.questionContainer.animate({left:-320, duration:200},function(){
            $.previous = previousQuestion;
            $.next = nextQuestion;
            $.bilanTab.remove($.previous.questionContainer);
            previousQuestion = $.next;
            $.previous.destroy();
        });
    }
}

Моя проблема в том, что первая анимация (первый вид движется влево) в порядке, но после этого следующий вид просто появляется без анимации.

Может ли кто-нибудь помочь? Спасибо!


person krakax    schedule 22.03.2013    source источник


Ответы (1)


Уже существует Titanium.UI.ScrollableView, который делает именно это. , для всех платформ.

Используйте его в Alloy следующим образом:

<Alloy>
    <Window id="win">
        <ScrollableView id="scrollableView" showPagingControl="true">
            <View id="view1" backgroundColor="#123" />
            <View id="view2" backgroundColor="#246" />
            <View id="view3" backgroundColor="#48b" />
        </ScrollableView>
    </Window>
</Alloy>

Вы можете динамически добавлять к нему представления внутри контроллера следующим образом:

$.scrollableView.addView(Ti.UI.createView({ // your custom attributes here});
person Josiah Hester    schedule 24.03.2013