Appcelerator 合金视图幻灯片答案

【问题标题】：Appcelerator alloy views slideAppcelerator 合金视图幻灯片
【发布时间】：2013-03-22 18:14:55
【问题描述】：

我在 Titanium 上使用 Alloy MVC 框架，并希望在视图之间制作幻灯片。当我在屏幕上滑动时，我想以从右到左或从左到右的滑动效果显示下一个/上一个视图。我正在使用此代码：

我的 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>

还有我在 index.js 控制器中的两个函数（此处未打印 prevQuestion 的 3 个）：

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

我的问题是第一个动画（第一个视图向左移动）没问题，但在那之后，下一个视图只是出现而没有任何动画。

有人可以帮忙吗？谢谢！

【问题讨论】：

标签： animation view titanium appcelerator titanium-alloy

【解决方案1】：

已经有 Titanium.UI.ScrollableView 在所有平台上执行此操作。

像这样在合金中使用它：

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

【讨论】：