钛可滚动视图索引

Question

我的项目是列出带有视图的产品，然后当点击一个产品时我必须转到另一个页面并且 re-list 带有可滚动视图的产品并首先显示点击的视图（抱歉英语不好):

假设这是我的列表（从 collection 中抓取）：

<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。

现在：

您点击了视图的 product_id。
在您的收集数据上编写代码以了解其索引 product_id.
使用第 2 步中的索引来设置这个属性 currentPage of ScrollableView

这里是整个过程的总结：

使用e.source

product_id

用这个product_id可以知道它的index正在收集资料。
最后，第 2 步的 index 将是 currentPage[=42 的值=] 属性的 ScrollableView。（将此 index 传递到产品页面是您的偏好。）

钛可滚动视图索引

Titanium scrollable view index

titanium

appcelerator

titanium-mobile

titanium-alloy

appcelerator-titanium