Titanium 可滚动视图索引

Question

我的项目是列出带有视图的产品，然后当单击产品时，我必须转到另一个页面并使用可滚动视图重新列出产品，并将单击的视图定位为首先显示（抱歉英语不好）：

假设这是我的清单（从收藏中获取）：

<Alloy>
<Window id="products" onClose="cleanup" title="All products" class="container" >
    <ScrollView dataCollection="list_products" dataTransform="parse_liste" layout='vertical' id="results" class="resultats">
        <View product_id="{ID}" 
            product_photo="{photo}" 
            product_name="{product_name}" lauyout='horizontal' class='heightAuto' width='Ti.UI.FILL' backgroundColor='#eee' bottom='1'>
            <ImageView touchEnabled="false" left='10' image='{photo}' />
            <View touchEnabled="false" layout='vertical' height='Ti.UI.SIZE'>
                <Label touchEnabled="false" left='100' class='nom' text='{product_name}' />
                <Label touchEnabled="false" left='100' class='nom' text='{product_price} €/h' />
            </View>
        </View>
    </ScrollView>
    <ActivityIndicator color="white" id="activityIndicator" message="Chargement des candidats ..."/>
</Window>

点击产品（控制器）时：

var products = Alloy.Collections.liste_recherche;
$.activityIndicator.show();
products.fetch({
    success:function(model,results){
        Alloy.Globals.results = results;
        $.activityIndicator.hide();
    }
});

//// CLICK ON A PRODUCT
$.list_products.addEventListener('click', function(e){
    if( Alloy.Globals.results ){
        ///////// GO TO PRODUCT PAGE AND PASS ARGS
        var xpng = require('xpng');
        xpng.openWin(Alloy.CFG.nav, 'product', Alloy.Globals.products);
    } 
});

产品页面：

var args = $.args;

function getProfil(){
    var products_array = [];    
    var c = ['gray','green','blue','red'];
   _.each(args, function(item, key, value){

        /* Créer la vue */
        var product_container = Ti.UI.createView({
            id:item.ID,
            layout:'vertical',
            backgroundColor:c[Math.floor(Math.random() * c.length)]
       });

        var product_image = Ti.UI.createImageView({ image : item.photo});
        var product_name = Ti.UI.createLabel({
        text: item.champs_candidat.nom
    });

    product_container.add(product_image);
    product_container.add(product_name);
    products_array.push(product_container);     
});

    var style = $.createStyle({
        classes: ['listeProfiles'],
        apiName: 'ScrollableView'
    });
    var product_scroller = Ti.UI.createScrollableView({
        className: 'listeProfiles',
        views : products_array,
        showPagingControl:true
   });
   product_scroller.applyProperties(style);
   $.product_win.add(product_scroller);
}

这些代码工作正常，只是我想先显示点击视图（从页面 A）。

感谢您的帮助。

Answer 1

我认为您需要捕获在 ScrollView 点击事件上点击了哪个视图：

$.list_products.addEventListener('click', function(e){
// e.source will give you the clicked view and will behave like $.VIEW_ID
// so you can access any property or method of the clicked view using e.source here

Ti.API.info("Clicked View ID = " + e.source.product_id);   

    if( Alloy.Globals.results ){
        ///////// GO TO PRODUCT PAGE AND PASS ARGS
        var xpng = require('xpng');
        xpng.openWin(Alloy.CFG.nav, 'product', Alloy.Globals.products);
    } 
});

根据您的代码，您已经使用此属性 product_id 禁用了视图的子视图的触摸，因此上述修改后的点击事件代码将能够为您提供 ScrollView 中点击的 View 的正确产品 ID。

现在：

1. 您点击了视图的 product_id。
2. 在您的集合数据上编写代码以了解该数据的索引 product_id。
3. 使用第 2 步中的索引来设置 ScrollableView 的此属性 currentPage

这里是整个过程的总结：

1. 使用e.source获取点击视图的product_id
2. 使用此 product_id 了解其在数据收集中的索引。
3. 最后，步骤 2 中的 index 将是 ScrollableView 的 currentPage 属性的值。 （您可以根据自己的喜好将此 index 传递到产品页面。）