大家知道每个App都有一个viewpage, 如何用H5+制作一个viewpage呢?
我想了下,用Mui的幻灯片slider通过判断程序是否第一次运行,来实现。
如果第一次运行,就打开一个slider页面(也就是我们的要实现的页面),如果不是第一次运行,则进入app主界面;
通过index.html里面实现这个判断:
var fir = plus.storage.getItem("frist");//获取本地存储的“frist”的值,如果为true,那么直接进主页面
if(fir=="true"){
var w = plus.webview.create("main.html");
w.show();
}else{
plus.storage.setItem("frist","true");//如果app打开过,那么把这个first的值保存到本地;
var w = plus.webview.create("viewpage.html");
w.show();
}
那么我们知道Mui里的slider大小是根据img图片的大小来适配兼容我们的屏幕的,我们要做的viewpage ,是一个全屏显示的幻灯片,那么我们就需要通过写一个js函数viewimg()来把img图片的高度属性改成当前屏幕可显示内容的高度即可。
function viewimg () {
var img;
img =document.getElementsByTagName("img");
for (var i=0;i<img.length;i++) {
img[i].style.height=document.documentElement.clientHeight+"px";
}
}
在程序已经打开的情况下,可以成功运行,跳转到viewpage.html没有问题。
但是我们调试,app关闭的情况下打开,会出现document.documentElement.clientHeight函数获取不到屏幕高度的值,而无法正常显示。也就是说document.documentElement.clientHeight的值为0;bug问题就处理啊,造成幻灯片无法正常显示。
但是通过测试:如果我在viewpage中使用一个settimeout延时来执行document.documentElement.clientHeight又能正常显示。
setTimeout(function () {
viewimg();
},300);
我的手机华为mate7,设定延时200ms以内,就不能正常显示,延时300ms以上就能正常显示。
另外使用
plus.webview.open(url)和var w = plus.webview.create(url);w.show()的方法都会出现这个情况。
这是一个bug?