我在 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();
});
}
}
我的问题是第一个动画(第一个视图向左移动)没问题,但在那之后,下一个视图只是出现而没有任何动画。
有人可以帮忙吗?谢谢!