Question

我有一个listView控件，现在在每个listView项目上滑动我想用按钮显示另一个视图，我该如何为IOS和Android做这个？

<Alloy>
<Window id="index">
    <ListView id="list" defaultItemTemplate='template' >
        <Templates>
            <ItemTemplate name="template" id="template" >
                <View layout="horizontal"   onSwipe="leftViewSwipe">
                    <View backgroundColor="red" height="Titanium.UI.FILL" bindId="leftView" width="Titanium.UI.FILL" ></View>
                    <View backgroundColor="blue"  height="Titanium.UI.FILL" bindId="rightView" width="Titanium.UI.FILL" ></View>
                </View>
            </ItemTemplate>
        </Templates>
        <ListSection/>
    </ListView>
</Window>

现在在控制器中，我有以下代码。它无法正常工作

function leftViewSwipe(e){  
    Ti.API.info('e ' + JSON.stringify(e));
    //e.source.children[1].left = 0;
    var item = $.list.sections[0].getItemAt(e.itemIndex);
    item.leftView.left = "-319";    
    item.rightView.left = "0";  
    $.list.sections[0].updateItemAt(0, item);
}

Answer 1

看看this。使用此代码库，您可以实现所需的功能。

另一种方法是使用listviews并收听滑动事件。

Answer 2

尝试这个commonJS模块并根据自己的心愿进行定制，您也可以根据自己的使用情况进行简化。这个系统适用于iOS＆amp; Android，虽然以下示例适用于iOS（由于NavWindow）。

app.js：

var win = Ti.UI.createWindow({backgroundColor:'white', title:'SWIPEABLE CELL'})

var navWin = Ti.UI.iOS.createNavigationWindow({
    window:win
})


function genWindow(module) {
    var ListTest = require(module);
    var win = new ListTest();
    return win;
}


var b1 = Ti.UI.createButton({title:'LIST VIEW SAMPLE', bottom:100});

win.add(b1);

b1.addEventListener('click',function(e){
    navWin.openWindow(genWindow('listviewsample'));
});

navWin.open();

listviewsample.js：

function leftSwipeHandler(e) {
        if (e.direction == 'left') {
            var theItem = e.section.getItemAt(e.itemIndex);
            theItem.template = 't2';
            e.section.updateItemAt(e.itemIndex,theItem,{animated:true,animationStyle:Titanium.UI.iPhone.RowAnimationStyle.LEFT});
        }
    }

    function rightSwipeHandler(e) {
        if (e.direction == 'right') {
            var theItem = e.section.getItemAt(e.itemIndex);
            theItem.template = 't1';
            e.section.updateItemAt(e.itemIndex,theItem,{animated:true,animationStyle:Titanium.UI.iPhone.RowAnimationStyle.RIGHT});
        }
    }

    function trashHandler(e) {
        e.section.deleteItemsAt(e.itemIndex,1,{animated:true,animationStyle:Titanium.UI.iPhone.RowAnimationStyle.FADE});
    }

    function doneHandler(e) {
        var theItem = e.section.getItemAt(e.itemIndex);
        theItem.template = 't3';
        e.section.updateItemAt(e.itemIndex,theItem,{animated:true,animationStyle:Titanium.UI.iPhone.RowAnimationStyle.FADE});
    }

    var baseTemplate = {
        properties:{height:50},
        childTemplates: [
            {
                type: 'Ti.UI.View',
                events:{
                    swipe:leftSwipeHandler
                },
                childTemplates:[
                    {
                        type:'Ti.UI.Label',
                        bindId:'content',
                        properties:{left:10,touchEnabled:false,color:'black'}
                    }
                ]
            }
        ]
    };

    var controlTemplate = {
        properties:{height:50},
        childTemplates: [
            {
                type: 'Ti.UI.View',
                properties:{left:-150,width:'100%'},
                events:{
                    swipe:rightSwipeHandler
                },
                childTemplates:[
                    {
                        type:'Ti.UI.Label',
                        bindId:'content',
                        properties:{left:10,touchEnabled:false,color:'black'}
                    }
                ]
            },
            {
                type:'Ti.UI.Label',
                properties:{color:'white',text:'Trash',width:75,right:75, height:50, backgroundColor:'red', textAlign:Ti.UI.TEXT_ALIGNMENT_CENTER},
                events:{
                    click:trashHandler
                }
            },
            {
                type:'Ti.UI.Label',
                properties:{color:'white',text:'Finish',width:75,right:0, height:50, backgroundColor:'green', textAlign:Ti.UI.TEXT_ALIGNMENT_CENTER},
                events:{
                    click:doneHandler
                }
            }
        ]
    }

    var doneTemplate = {
        properties:{height:50},
        childTemplates: [
            {
                type: 'Ti.UI.View',
                childTemplates:[
                    {
                        type:'Ti.UI.Label',
                        bindId:'content',
                        properties:{left:10,touchEnabled:false, color:'green'}
                    }
                ]
            }
        ]
    };

    var data = [];
    for(var i=0;i<20;i++) {
        data.push({properties:{backgroundColor:'white',selectionStyle:Ti.UI.iPhone.ListViewCellSelectionStyle.NONE},content:{text:'THIS IS A TASK INDEX'+(i+1)}})
    }
    var section = Ti.UI.createListSection({items:data});

    var listView = Ti.UI.createListView({
        sections:[section],
        templates:{'t1':baseTemplate,'t2':controlTemplate,'t3':doneTemplate},
        defaultItemTemplate:'t1'
    })

    function listviewsample() {
        var win = Ti.UI.createWindow({backgroundColor:'white', title:'LISTVIEW', backButtonTitle:'BACK'});
        win.add(listView);

        return win;
    }

    module.exports = listviewsample;

列表视图项的水平翻转以显示按钮

2 个答案: