FrameGroup加页面背景实现起始页

huguoba

使用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">
      
</div>
</body>
</html>

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

yyyfx

感谢分享

huguoba

自己顶一下！

流涎绅士

试试，我的纯html老是不流畅，显示白底

geeklee

要是来个截图就好了！

app爱好者

你和我发的一样啊！

jessic

很不错谢谢分享

xister · 回复于2015-10-16 08:10:24

在哪个文件中定义了本地啊变量？
能截个图吗？

勇可可【1161277121】 · 回复于2015-10-16 09:19:01

希望新手能明白这个道理

芒果人生 · 回复于2015-10-18 19:14:58

苹果真机测试没有图片