Question

以下是标签栏的代码：

<Alloy>
    <Window class="container">
        <Label id="label" onClick="doClick">Hello, World</Label>
                <TabbedBar id="bb1" platform="ios" backgroundColor="#369" top="50" height="25" width="200">

                    <!-- The Labels tag sets the TabbedBar.labels property. -->
                    <Labels>

                        <!-- Specify text with node text or the title attribute. -->
                        <!-- Can also specify the enabled, image and width attributes. -->

                        <Label>One</Label>
                        <Label>Two</Label>
                        <Label>Three</Label>

                    </Labels>

                    <!-- Place additional views for the TabbedBar here. -->
                    <Views>
                    <View backgroundColor='red'>1</View>
                    <View>2</View>
                    <View><Label>Does this work!</Label></View>
                    </Views>

                </TabbedBar>
    </Window>
</Alloy>

当我点击一个标签时，我如何确保视图对应于按下的按钮 - 我知道如何在钛合金中做到这一点而不是合金。

干杯。

Answer 1

昨天我遇到了同样的问题。我确定必须有更好的方法，但我在文档中看不到任何内容，这是我的解决方案：

var animation = require('alloy/animation');

var previousIndex = $.tabbedBar.getIndex();
$.tabbedBar.addEventListener('click', function(){

    var currentIndex = $.tabbedBar.getIndex();
    var viewArr = [];

    viewArr[0] = $.view1;
    viewArr[1] = $.view2;
    viewArr[2] = $.view3;

    animation.crossFade(viewArr[previousIndex], viewArr[currentIndex], 700)

    previousIndex = currentIndex;

});

编辑：（如果您不知道，在Android上有一个模块可以为您提供类似的功能：https://github.com/ricardoalcocer/viewpager但请检查原始回购中的问题＃5，因为您必须将其纳入在Android版本中，您不需要自己处理点击。）

tabbedBar，显示钛的不同视图

1 个答案: