水平swip的listview項目揭示按鈕

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的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;