Android开发之ApiCloud轮播图开发

首先看下效果图：
效果还可以吧。
如何开发呢？
首先可以在apicloud模块库中里面搜索UIScrollPicture这个模块添加后即可开发，调用方法也很简单有相应的文档说明不过有的参数不是很容易理解，我修改了下官方的demo，代码如下：
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        label {
            margin: 10px;
            font-size: 24px;
        }

        ul {
            margin-bottom: 10px;
        }

        ul li {
            margin: 5px 10px;
            padding: 5px;
            color: #000;
            word-wrap: break-word;
        }
    </style>
    <style type="text/css">
        html {
            background-color: white;
            padding: 10px;
        }

        header {
            border-bottom: 1px solid #ccc;
            padding: 25px 0;
        }

        span {
            padding: 5px 5px;
            margin: 5px;
            display: inline-block;
            background-color: #e8e8e8;
        }
    </style>
</head>

<body>
    <span class="clickbtn" tapmode="active" onclick="takeSDKActivity()">打开SDK页面</span>
    <span class="clickbtn" tapmode="active" onclick="openRTSPPlayerActivity()">打开RTSP视频</span></br>
    <span tapmode onclick="fnOpen()">open()</span>
    <span tapmode onclick="fnClose()">close()</span>
    <span tapmode onclick="fnShow()">show()</span>
    <span tapmode onclick="fnHide()">hide()</span>
    <span tapmode onclick="fnSetCurrentIndex()">setCurrentIndex()</span>
    <span tapmode onclick="fnReloadData()">reloadData()</span>
    <span tapmode onclick="fnAddEventListener()">addEventListener()</span>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var XiaYiYeModule = null;
    var VLCPlayerModule = null;
    var UIScrollPicture;
    apiready = function() {
        XiaYiYeModule = api.require('XiaYiYeModule');
        VLCPlayerModule = api.require('VLCPlayerModule');
        UIScrollPicture = api.require('UIScrollPicture');
    }

    function takeSDKActivity() {
        var param = {
            appParam: "打开了SDK页面了"
        };
        XiaYiYeModule.startXiayiyeActivity(param);
    }

    function openRTSPPlayerActivity() {
        var param = {
            appParam: "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"
        };
        VLCPlayerModule.startVLCActivity(param);
    }


    function fnOpen() {
			UIScrollPicture.open({
				rect : {
					x : 0,
					y : 240,
					w : api.winWidth,
					h : 300
				},
				data : {
					paths : ['http://p2.so.qhimg.com/t011d3ccbad92e11237.jpg', 'widget://res/t01c8026adad49a51f.jpg', 'widget://res/gogd.jpg'],//这里图片地址可为本地地址和网络地址，http的网络地址，或者widget的本地地址还有fs开头的，不过fs我还不太理解
					captions : ['猫', '可爱的萌宠喵星人', '西伯利亚,哈士奇犬,狗,两个,成年人,坐,一起', 'title4', 'title5']
				},
				styles : {
					caption : {
						height : 35,
						color : '#E0FFFF',
						size : 13,
						bgColor : '#696969',
						position : 'bottom'
					},
					indicator : {
						align : 'center',
						color : '#FFFFFF',
						activeColor : '#DA70D6'
					}
				},
				placeholderImg : 'widget://res/cat.jpg',
				contentMode : 'scaleToFill',
				interval : 3,
				loop : true,
                                fixedOn: "main",//这里表示的是轮播图依附在那个页面上，我这里是因为轮播图在main这个frame里面所有写的main
				fixed : false
			}, function(ret, err) {
				if (ret) {
					alert(JSON.stringify(ret));
				} else {
					alert(JSON.stringify(err));
				}
			});
		};
		function fnClose() {
			UIScrollPicture.close();
		};
		function fnShow() {
			UIScrollPicture.show();
		};
		function fnHide() {
			UIScrollPicture.hide();
		};
		function fnSetCurrentIndex() {
			UIScrollPicture.setCurrentIndex({
				index : 2
			});
		};
		function fnReloadData() {
			UIScrollPicture.reloadData({
				data : {
					paths : ['http://p2.so.qhimg.com/t017ccbb9391da2b4a7.jpg', 'http://p3.so.qhimg.com/t01d12e93583a86b823.jpg', 'http://p1.so.qhimg.com/t01cf5cad6fa213da81.jpg'],
					captions : ['title1', 'title2', 'title3']//这里分别是图片的网络地址和图片对应的标题
				}
			});
		};

		function fnAdEventListener() {
			UIScrollPicture.addEventListener({
				name : 'scroll'
			}, function(ret, err) {
				if (ret) {
					alert(JSON.stringify( ret ));
				} else {
					alert(JSON.stringify( err ));
				}
			});
		};
</script>

</html>
实在看不懂得，可以下载源码查看：
点击打开下载源码
Android开发之ApiCloud轮播图开发

猜你喜欢
