Question

我的项目是列出带有视图的产品，然后点击产品时我必须转到另一个页面并使用scrollableview重新列出产品并定位首先显示的点击视图（对不起英语不好）：

让我们说这是我的名单（从一个集合中抓取）：

<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中为您提供所单击视图的正确产品ID。

现在：

您已点击该视图的product_id。
在您的收集数据上编写代码以了解其索引 PRODUCT_ID。
使用步骤2中的索引设置ScrollableView

currentPage

以下是整个过程的摘要：

使用e.source获取所点击视图的 product_id
使用此 product_id 在数据收集中了解其索引。
最后，第2步中的 index 将是ScrollableView的 currentPage 属性的值。（您希望如何将索引传递给产品页面。）

Titanium可滚动视图索引

1 个答案: