/ Published in: JavaScript
based on the NappScrollViewExtended module (it is good but couse my app some problem)
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
// ScrollView.js function ScrollView(args){ var args = args || {}; var nearBottom = false; var loadingView = Ti.UI.createView({ height:60, width: Ti.UI.SIZE, backgroundColor:"transparent", visible:false }); var activityIndicator = Ti.UI.createActivityIndicator({ color: '#000', font: {fontFamily:'Helvetica Neue', fontSize:16, fontWeight:'bold'}, message: ' Loading...', style:Ti.UI.iPhone.ActivityIndicatorStyle.DARK, height:Ti.UI.SIZE, width:Ti.UI.SIZE }); activityIndicator.show(); loadingView.add(activityIndicator); var ScrollView = Ti.UI.createScrollView({ width: Ti.UI.SIZE, height: Ti.UI.FILL, contentWidth: Ti.UI.SIZE, contentHeight: Ti.UI.SIZE, showVerticalScrollIndicator: true, showHorizontalScrollIndicator: false, backgroundColor:"transparent", layout:"vertical" }); var contentView = Ti.UI.createView({ width: Ti.UI.FILL, height: Ti.UI.SIZE, layout: 'vertical', top:0, left:0, backgroundColor:'transparent' }); ScrollView.add(contentView); ScrollView.add(loadingView); ScrollView.addEventListener('scroll',function(e){ var tolerance = 60; nearBottom = (contentView.getRect().height - e.y) <= (ScrollView.getRect().height + tolerance); }); ScrollView.addEventListener('scrollend',function(e){ if(nearBottom){ //this.scrollTo(0,bottomLine); loadingView.setVisible(true); nearBottom = false; ScrollView.fireEvent('InfiniteScrolling'); } }); ScrollView.infiniteScrollingCompleted = function(e){ loadingView.setVisible(false); }; ScrollView.addView = function(view){ contentView.add(view); } return ScrollView; } module.exports = ScrollView; /* SAMPLE USAGE */ var win = Ti.UI.createWindow({}); var ScrollView = require('ScrollView'); //point to ScrollView.js scrollView = new ScrollView(); // scrollView must be inside a View Container var contentView = Ti.UI.createView({ width:'90%', height: 500, top:200 }); contentView.add(scrollView); win.add(contentView); //Demo infinite load scrollView.addEventListener("InfiniteScrolling", function(e){ Ti.API.info("InfiniteScrolling event -> start loading data"); //simulate download of remote data setTimeout(function(){ //call infiniteScrollingCompleted when your update is done scrollView.infiniteScrollingCompleted(); //update the scrollView for(var i=0; i < 3; i++){ var view = Ti.UI.createView({ height:100, top:10, backgroundColor:"blue" }); //i need use addView to add to the subview not add scrollView.addView(view); } },1500); }); //demo data for(var i=0; i < 10; i++){ var view = Ti.UI.createView({ height:100, top:10, backgroundColor:"#ccc" }); //i need use addView to add to the subview not add scrollView.addView(view); } win.open();