xml 适用于iOS的Flipboard样式选项卡指示器。将tabIndicator.js拖放到Alloy lib文件夹中,然后将模块标记添加到tabgroup和pa

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了xml 适用于iOS的Flipboard样式选项卡指示器。将tabIndicator.js拖放到Alloy lib文件夹中,然后将模块标记添加到tabgroup和pa相关的知识,希望对你有一定的参考价值。

// put me in /app/lib

exports.createTabGroup = function(args) {

	// create base tabgroup
	var tabGroup = Ti.UI.createTabGroup(args);

	if (OS_IOS) {

		// get the display width and calc the tab width
		var deviceWidth = Ti.Platform.displayCaps.platformWidth;
		var tabWidth = deviceWidth / tabGroup.tabs.length;

		var indicatorWrapper = Ti.UI.createView({
			width : tabWidth,
			height : args.tabIndicatorHeight || 1.5,
			left : 0,
			bottom : 0,
		});

		// create the base indicator, takes args for height, width, color
		var indicator = Ti.UI.createView({
			height : Ti.UI.FILL,
			backgroundColor : args.tabIndicatorColor || "red",
			width : args.tabIndicatorWidth || tabWidth
		});

		// trap the focus event and animate the indicator
		tabGroup.addEventListener("focus", function(e) {
			indicatorWrapper.animate({
				left : tabWidth * e.index,
				duration : 100
			});
		});

		// add the indicator and return the tabgroup
		indicatorWrapper.add(indicator);
		tabGroup.add(indicatorWrapper);
	}

	return tabGroup;
};
<!-- note the ONLY change to this is the additional module="tabIndicator" 
attribute + properties to override indicator defaults //-->
<Alloy>
	<TabGroup module="tabIndicator" tabsBackgroundColor="#000" tabIndicatorHeight="1" tabIndicatorColor="white" tabIndicatorWidth="75%">
		<Tab  title="Tab 1" icon="/images/icons/519-tools-1.png" activeIcon="/images/icons/519-tools-1_active.png" color="#555" activeColor="#fff">
			<Window  title="Tab 1" barColor="black" navTextColor = "#fff">
				<Label onClick="openWin1">Tab 1</Label>
			</Window>
		</Tab>
		<Tab title="Tab 2" icon="/images/icons/516-archive-box.png" activeIcon="/images/icons/516-archive-box_active.png" color="#555"  activeColor="#fff">
			<Window  title="Tab 2" barColor="green" navTextColor = "red">
				<Label onClick="openWin2">Tab 2</Label>
			</Window>
		</Tab>
		<Tab  title="Tab 3" icon="/images/icons/522-floppy-disk.png" activeIcon="/images/icons/522-floppy-disk_active.png" color="#555"  activeColor="#fff">
			<Window   title="Tab 3">
				<Label >Tab 3</Label>
			</Window>
		</Tab>
	</TabGroup>
</Alloy>

以上是关于xml 适用于iOS的Flipboard样式选项卡指示器。将tabIndicator.js拖放到Alloy lib文件夹中,然后将模块标记添加到tabgroup和pa的主要内容,如果未能解决你的问题,请参考以下文章

在 Rmarkdown 中动态创建选项卡不适用于 ggplot,而它适用于 plotly

材质 UI 已选择选项卡样式

选项卡内的 EXTJS 网格 - 过滤器仅适用于页面刷新

颜色设置仅适用于手册页中的“帮助”选项卡,不适用于整个手册页

编辑 Ionic 选项卡图标样式

Javascript 在移动设备上不起作用,但在桌面上适用于四个 otp 框的选项卡到下一个字段