Android開發之ApiCloud輪播圖開發
阿新 • • 發佈：2019-01-29
首先看下效果圖：
效果還可以吧。
如何開發呢？
首先可以在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>
實在看不懂得，可以下載原始碼檢視：