javascript - 列表中的向下滑块

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

然后你需要应用一个“点击”监听器。

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;
})

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