apicloud apicloud

注册
查看: 5708|回复: 20

[APP开发技巧] FrameGroup加页面背景实现起始页

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

[APP开发技巧] FrameGroup加页面背景实现起始页

5708 20 | 发表于 2015-8-16 02:07:57 |阅读模式 | |
使用FrameGroup中页面背景实现起始页多页切换,页面流畅程度高于纯Html页面背景实现方式。

1.使用FrameGroup做起始页的容器
                 api.openFrameGroup({
                                        name : 'welcome',
                                        bounces : false,
                                        index : 0,
                                        rect : {
                                                x : 0,
                                                y : 0,
                                                w : 'auto',
                                                h : 'auto'
                                        },
                                        scrollEnabled : true,
                                        frames : [{
                                                name : 'welcome_1',
                                                url : './html/welcome/welcome_1.html',
                                                bounces : false,
                                                opaque : true,
                                                vScrollBarEnabled : true,
                                                hScrollBarEnabled : true,
                                                bgColor : './res/start00.png' //此处使用frame背景图方式做页面
                                        }, {
                                                name : 'welcome_2',
                                                url : './html/welcome/welcome_2.html',
                                                bounces : false,
                                                opaque : true,
                                                vScrollBarEnabled : true,
                                                hScrollBarEnabled : true,
                                                bgColor : './res/start01.png'
                                        }, {
                                                name : 'welcome_3',
                                                url : './html/welcome/welcome_3.html',
                                                bounces : false,
                                                opaque : true,
                                                vScrollBarEnabled : true,
                                                hScrollBarEnabled : true,
                                                bgColor : './res/start02.png'
                                        }, {
                                                name : 'welcome_4',
                                                url : './html/welcome/welcome_4.html',
                                                bounces : false,
                                                opaque : true,
                                                vScrollBarEnabled : true,
                                                hScrollBarEnabled : true,
                                                bgColor : './res/start03.png'
                                        }]
                                }, function(ret, err) {
                                        var index = ret.index;
                                        var name = ret.name;
                                        if (index == 0) {
                                                $api.setStorage('MyfirstStart', true);
                                        }
                                });

2.每个页面使用透明背景
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <style>
            img{
        width:100%;
        height:100%;
        margin:0;
        padding:0;  
        overflow:hidden;     
        }
        body,html,#wrap{
                height: 100%;
                width: 100%;
                background:transparent !important;          
        }
    </style>
</head>
<body>
    <div id="wrap">
        <!--<img src='../../res/start00.png'/>-->
    </div>
</body>
</html>

3.利用一个本地变量存储首次运行状态,当运行完毕后设置状态值。第二次检测状态后隐藏frameGroup。
4.最后一个页面增加点击事件,开启你的主页。





本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-8-16 08:19:07 |
感谢分享

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

 楼主| 发表于 2015-8-17 12:09:46 |
自己顶一下!

主题:
46
帖子:
261
云币:
210
发表于 2015-8-29 18:17:48 |
试试,我的纯html老是不流畅,显示白底

马路杀手

UID:106939

主题:
39
帖子:
199
云币:
837
发表于 2015-8-29 21:04:02 |
要是来个截图就好了!

主题:
9
帖子:
197
云币:
1825

APICloud粉丝一周年

发表于 2015-8-29 23:05:56 |
你和我发的一样啊!

马路杀手

UID:48443

主题:
27
帖子:
206
云币:
451

一周年

发表于 2015-8-30 01:19:06 |
很不错   谢谢分享

驾校小白

UID:165022

主题:
6
帖子:
32
云币:
151
发表于 2015-10-16 08:10:24 |
在哪个文件中定义了本地啊变量?
能截个图吗?

主题:
73
帖子:
4727
云币:
1469

足球狗狗年旺旺旺APICloud粉丝连续签到100天APICloud毕业勋章APICloud骨灰粉模块开发者签到党土豪志愿者一周年中秋节社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人SB侠

发表于 2015-10-16 09:19:01 |
希望新手能明白这个道理

主题:
17
帖子:
46
云币:
122
发表于 2015-10-18 19:14:58 |
苹果真机测试没有图片
123下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表