水平滑动列表视图项目以显示按钮

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。有了这个代码库，你可以实现你所需要的。

另一种方法是使用列表视图并监听滑动事件。

Answer 2

试试这个 commonJS 模块并根据您的需求进行自定义，您也可以根据自己的用例对其进行简化。此系统适用于 iOS 和 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;