2

我正在创建一个包含一些自定义“行”的列表（ScrollView）（图像包含一个“行”）。我显示了 5 行并添加了一个事件侦听器，以便当用户滚动到末尾时，会加载并显示另外 5 个元素。我使用 Alloy 制作了这个，但我注意到它花费的时间太长，所以我尝试手动编写视图。

// created the views programmatically to see if there was any difference from Alloy

function createRow(args) {
	var container = Ti.UI.createView({
		layout: "vertical",
		width: Ti.UI.FILL,
		height: "42dp"
	});
	var rowContent = Ti.UI.createView({
		width: Titanium.UI.FILL,
		height: "41dp", //Titanium.UI.FILL,
		layout: "horizontal",
		left: "16dp",
		right: "16dp"
	});
	var border = Ti.UI.createView({
		left: "16dp",
		right: "16dp",
		height: "1dp",
		backgroundColor: Colors.darkGrey
	});
	
	var titleScroll = Ti.UI.createScrollView({
		scrollType: "horizontal",
		width: "49%",
		horizontalWrap: false
	});
	var scrollContainer = Ti.UI.createScrollView({
		scrollType: "horizontal",
		horizontalWrap: false,
		width: "50%"
	});
	var scroll = Ti.UI.createView({
		layout: "horizontal",
		horizontalWrap: false,
		right: 0,
		width: Ti.UI.SIZE,
		height: Titanium.UI.SIZE
	});
	var title = Ti.UI.createLabel({
		text: args.title,
		font: args.isTitle ? {font: "Lato-Regular", fontSize: "22dp"} : {fontFamily: "Lato-Regular", fontSize: "15"},
		horizontalWrap: false,
		wordWrap: false,
		left: 0,
		color: Colors.grey,
		minimumFontSize: "15dp"
	});
	if(args.value) {
		var t = args.value.join();
			
		scroll.add(Ti.UI.createLabel({
			text: t,
			color: args.action ? Colors.blue : Colors.black,
			font: {fontSize: "15dp", fontFamily: "Lato-Regular"},
			right: "5dp",
			width: Ti.UI.SIZE,
			horizontalWrap: false,
			wordWrap: false,
			minimumFontSize: "15dp"
		}));
	}
	
	if(args.data)
		scrollContainer.data = args.data; //just a dump of the data used by the click handler
		
	if(args.action)
		scrollContainer.addEventListener("click",args.action);
	
	scrollContainer.add(scroll);
	titleScroll.add(title);
	rowContent.add(titleScroll);
	rowContent.add(scrollContainer);
	container.add(rowContent);
	container.add(border);
	
	return container; //Ti.UI.View
}

function createHeader(args) {
	var header = Ti.UI.createView({
		layout: "horizontal",
		height: "44dp",
		backgroundColor: "#fff"
	});
	
	var leftView = Ti.UI.createView({
		width: "25%",
		height: Ti.UI.FILL
	});
	var rightView = Ti.UI.createView({
		width: "25%",
		height: Ti.UI.FILL
	});
	var centerView = Ti.UI.createView({
		width: "49%",
		height: Ti.UI.FILL
	});
	var verticalAligner = Ti.UI.createView({
		height: Ti.UI.SIZE,
		width: Ti.UI.SIZE,
		layout: "vertical"
	});
	var headerTitle = Ti.UI.createLabel({
		color: Colors.green,
		font: {fontSize: "16.5dp", fontFamily: "Lato-Regular"},
		textAlign: "center",
		horizontalWrap: false,
		wordWrap: false
	});
	var headerSubtitle = Ti.UI.createLabel({
		font: {fontSize: "14dp", fontFamily: "Lato-Regular"},
		textAlign: "center",
		color: Colors.grey,
		horizontalWrap: false,
		wordWrap: false
	});
	
	if(args.rightView)
		rightView.add(args.rightView);
	if(args.leftView)
		leftView.add(args.leftView);
	
	verticalAligner.add(headerTitle);
	verticalAligner.add(headerSubtitle);
	centerView.add(verticalAligner);
	header.add(leftView);
	header.add(centerView);
	header.add(rightView);
	
	headerTitle.text = args.title;
	headerSubtitle.text = args.subTitle;
		
	return header;
}

function createBlock(args) {
	var container = Ti.UI.createView({
		layout: "vertical",
		width: "100%",
		height: Ti.UI.SIZE
	});
	var covers = Ti.UI.createView({ //
		height: "119dp"
	});
	var content = Ti.UI.createView({
		height: Ti.UI.SIZE,
		layout: "vertical"
	});
	function goToEvent() {
		Storage.event.id = args.event;
		Alloy.Globals.openWin("event");
	}
	
	var data = new D.data();
	var w = Android ? Ti.Platform.displayCaps.platformWidth :  Measure.dpToPX(Ti.Platform.displayCaps.platformWidth);
	var h = Measure.dpToPX(119); //Android ? Alloy.Globals.dpToPX(119) : Measure.dpToPX(119);
	if(args.images) {
		//setTimeout(function() { //timeout didn't make any difference
			var image = null;
			//for(var i = 0; i < args.images.length; i++) {
				image = Ti.UI.createImageView({
					image: data.getBlobResized({ //returns a URL for the picture 
						id: args.images[0], //i
						width: w,
						height: h
					}),
					width: iOS ? Measure.pxToDP(w) : Alloy.Globals.pxToDP(w),
					height: iOS ? Measure.pxToDP(h): Alloy.Globals.pxToDP(h)
				});
				image.addEventListener("click",goToEvent);
				covers.add(image); //addView
			//}
		//},0);
	}
	
	var row = null;
	
	if(args.rows) {
		for(var j=0; j < args.rows.length; j++) {
			//row = Alloy.createController("index/events/block/row",args.rows[j]).getView();
			content.add(createRow(args.rows[j]));
		}
	}
	
	container.add(createHeader(args));
	container.add(covers);
	container.add(content);
	
	return container;
}

特别是，在提供的代码中，我调用了 4 次在createRow()元素内部创建一行的函数（如图所示）。由于某种原因，此功能需要 7 毫秒到 10 毫秒才能运行。所以调用它 4 次意味着它会减慢整个过程28-40ms。

在Android上，该应用程序根本不会滞后。在iOS上，它会完全停止用户交互，直到完成这些操作

  • 在 Appcelerator Studio 上使用最新的 Titanium SDK (5.2.2GA)
  • 在 iPhone 5 上测试，iOS 模拟器 (4s,5,6,6s)

谢谢您的帮助

4

0 回答 0