从列表中下滑块

Question

我是Appcelerator Titanium的新手，通过开发一些移动应用程序进行练习，遇到了一些情况，需要一些帮助。

我有一个项目列表，从表格中显示，点击任何项目，下面应该有一个更大的空间，从点击项目向下滑动一些输入字段。我附上了一个样本，基本上来自图1，当被触摸时（在移动设备中），它应该像图2中那样展开。

感谢。

Answer 1

这对Titanum来说有点棘手。因为它看起来是一种基于行的方法。首先，您应该决定使用TableView

var tableView = Ti.UI.createTableView({
  width: Ti.UI.FILL,
  height: Ti.UI.FILL,
});

然后您需要从左侧屏幕添加行。这些是简单的行。

var rows = [];
for (var i = 0; i<data.length; i++) {
  var row = Ti.UI.createTableViewRow(...);
  // do some layout, add some views here
  rows.push(row);
}
// add to table view
tableView.data = [rows];

然后你需要应用'click'监听器。

var isOpen = false; // is already one element clicked and opened?
var whichIsOpen = undefined; // if yes, which one (index of clicked element)?
tableView.addEventListener('click', function(e){
  if(isOpen && e.index === whichIsOpen) {
    tableView.deleteRow(whichIsOpen+1);
    isOpen = false;
    return;
  }
  if(isOpen && e.index === whichIsOpen + 1) {
    return;
  }
  tableView.deleteRow(whichIsOpen+1);
  var specialRow = Ti.UI.createTableViewRow(...); // row which contains the elements of the right screen
  var newIndex = e.index > whichIsOpen ? e.index : e.index + 1; // because removed one
  tableView.insertRowAfter(newIndex-1, specialRow);
  whichIsOpen = newIndex;
})

在此解决方案中，您只能同时打开一个元素。我从头上输入了这个，我没有测试过。所以这取决于你！