Friday 7 February 2014

Load more TableView Row when user scrolls "near" bottom of TableView : 

/*In this demo, we simply show how you could dynamically scroll with a continuous amount of data in the tableview by detecting when the user's scroll position gets near the end of the table and start a background fetch of new data and seamlessly append the new data to the table automatically..*/
var win = Ti.UI.createWindow(); var data = []; var numberOfRows = 575 + 1; var showRows = 50; var rowNumer = 1; for (var c = 0; c < showRows; c++) { data[c] = { title : "Row " + (rowNumer) }; rowNumer++; } var tableView = Ti.UI.createTableView({ data : data }); win.add(tableView); var navActInd = Titanium.UI.createActivityIndicator(); var updating = false; var loadingRow = Ti.UI.createTableViewRow({ title : "Loading..." }); function beginUpdate() { updating = true; navActInd.show(); tableView.appendRow(loadingRow); // just mock out the reload setTimeout(endUpdate, 2000); } function endUpdate() { updating = false; tableView.deleteRow(showRows, {}); // simulate loading for (var c = 0; c < showRows; c++) { if (rowNumer == numberOfRows) { return; } tableView.appendRow({ title : "Row " + (rowNumer) }, {}); rowNumer++; } showRows = showRows * 2; // numberOfRows = (numberOfRows - showRows); // just scroll down a bit to the new rows to bring them into view
}

var lastDistance = 0;
// calculate location to determine direction

tableView.addEventListener('scroll', function(e) {
     if (rowNumer != numberOfRows) {
          if (Ti.Platform.osname == 'iphone') {
              var offset = e.contentOffset.y;
              var height = e.size.height;
              var total = offset + height;
              var theEnd = e.contentSize.height;
              var distance = theEnd - total;

              // going down is the only time we dynamically load,
              // going up we can safely ignore -- note here that
              // the values will be negative so we do the opposite
              if (distance < lastDistance) {
                  // adjust the % of rows scrolled before 
                  //we decide to start fetching 
                  var nearEnd = theEnd * .75;

                  if (!updating && (total >= nearEnd)) {
                      beginUpdate();
                  }
              }
              lastDistance = distance;
     }
     if (Ti.Platform.osname == 'android') {
         if ((e.firstVisibleItem + e.visibleItemCount) == e.totalItemCount) {
              for (var c = 0; c < showRows; c++) {
                  if (rowNumer == numberOfRows) {
                       return;
                  }
             tableView.appendRow({
                    title : "Row " + (rowNumer)
             }, {});
             rowNumer++;
          }
      }
   }
 }

});
win.open(); 
 
You can Download the Demo Project From Here. 

No comments:

Post a Comment