【App開發筆記】2.7 添加第一個模塊-UILoading

源碼地址

2.7.1 在Apicloud studio中右鍵項目根目錄“模塊管理”

模塊管理

2.7.2 選擇模塊庫

選擇模塊庫

2.7.3 找到UIloading并點擊右上角的加號

點擊右上角的加號

2.7.4 編譯自定義loader并安裝

編譯自定義loader

2.7.5 將我們【2.6 AI+AE做一個簡單的loading動圖】 中制作的png序列放到image/middle_loading中

放到image/middle_loading中

2.7.5 封裝模塊的接口

js/common.js

function OpenLoadingMiddle() {
    var activity = api.require('UILoading');
    var content=[];
    for(var i=0;i<50;i++){
        content.push({frame: 'widget://image/middle_loading/'+i+'.png'})
    }
    activity.keyFrame({
        rect: {
            w: 34,
            h: 34
        },
        styles: {
            bg: 'rgba(0,0,0,0)',
            corner: 5,
            interval: 40,
            frame: {
                w: 34,
                h: 34
            }
        },
        content:content
    });

}
function CloseLoadingMiddle() {
    var uiloading = api.require('UILoading');
    uiloading.closeKeyFrame();
}

2.7.6 調用一下試試

index.html

<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript">
    apiready = function () {
        OpenLoadingMiddle();
        setTimeout('CloseLoadingMiddle()', 3000)
    }
</script>

2.7.7 同步到手機

效果圖
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容