Titanium中如何实现正在加载时,旋转的小圆圈

最新推荐文章于 2020-06-03 21:46:09 发布

最新推荐文章于 2020-06-03 21:46:09 发布 · 372 阅读

文章标签：

#titanium #ActivityIndicator #加载 #旋转小圆圈

Titanium 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在APP中实现加载指示器，通过使用ActivityIndicator控件并结合不同平台样式设置，提供良好的用户体验。

在实际APP开发中,数据在加载到手机端之前的这段时间,一般大家都会设置一个旋转的小圆来提示用户正在加载,这对非常友好的一个用户体验之一.所以我们就来实现一下这个功能

这里要用到一个控件叫ActivityIndicator

我们先在要添加的xml中添加一段下面的代码

	<View id="loading_view" class="loading_view">
			<ActivityIndicator id="activityIndicator" message="正在拼命加载中..."/>
		</View>

其对应的.tss文件设置如下

".loading_view":{
	width:"100%",
	height:"100dp"	
}

"#activityIndicator":{	
	width:"100%",
	height:"50%",
	color:"black", 
}

然后再在你所对应的js(我用的是coffee)中添加如下代码

//首先根据不同的平台为activityIndicator设置不同的style
if (OS_IOS) {
  $.activityIndicator.setStyle(Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN);
} else if (OS_ANDROID) {
  $.activityIndicator.setStyle(Ti.UI.ActivityIndicatorStyle.BIG);
}

//使用这个activityIndicator
someViewObject.addEventListener('click', function(e) {
    $.activityIndicator.show();

    setTimeout(function() {
         $.activityIndicator.hide();
    },3000);
});