<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/common.css" rel="stylesheet" />
<link href="fonts/iconfont.css" rel="stylesheet" />
<link href="css/fontAwesome/css/font-awesome.min.css" rel="stylesheet" />
<style>
.mui-icon-search {
padding-right: 30px !important;
}
#asidebar,
.mui-table-view,
.mui-table-view-cell {
background: #FAFAFA;
color: #333;
}
.mui-table-view-cell {
border: none;
}
.mui-table-view-inverted:before,
.mui-table-view-inverted:after {
background-color: #eee;
}
.asidebar-detail {
background: #F4F4F5;
text-align: center;
min-height: 100px;
padding: 20px 20px 0 30px;
overflow: hidden;
}
.asidebar-img .fa {
color: #fff;
font-size: 2rem;
}
.asidebar-img {
width: 50px;
height: 50px;
line-height: 55px;
float: left;
border-radius: 25px;
background: #0077D9;
text-align: center;
box-shadow: 2px 2px 4px #333;
-webkit-box-shadow: 2px 2px 4px #333;
}
.asidebar-img img {
width: 100%;
border-radius: 25px;
}
.member-name {
float: left;
width: 100px;
overflow: hidden;
white-space: nowrap;
padding-left: 10px;
padding-top: 10px;
}
.mui-table-view-inverted .mui-table-view-cell:after {
background-color: #eee;
}
.asidebar-board {
border-top: 1px solid #eee;
width: 100%;
height: 60px;
position: absolute;
bottom: 0;
left: 0;
}
.asidebar-tab {
color: #999;
display: inline-block;
width: 33.3%;
padding: 10px 0;
float: left;
text-align: center;
}
.asidebar-tab .fa:before {
color: #999 !important;
}
.asidebar-tab-word {
font-size: 1.4rem;
}
.icon-word {
font-size: 1.6rem;
font-family: "micosoft yahei";
color: #383838;
padding-left: 5px;
}
.fa:before {
font-size: 20px !important;
}
#asidebar-setting {
padding-top: 20px;
font-size: 2rem !important;
}
</style>
</head>
<body>
<div class="mui-off-canvas-wrap mui-draggable">
<aside id="asidebar" class="mui-off-canvas-left">
<div class="asidebar-detail">
<div class="asidebar-img">
<!--<i class="fa fa-user"></i>-->
<img src="images/default.jpg" />
</div>
<div class="member-name">
登录更精彩
</div>
</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" id="asidebar-setting">
<li class="mui-table-view-cell">
<a class="mui-navigate-right mui-icon fa fa-users">
<span class="icon-word">同行</span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right mui-icon fa fa-coffee">
<span class="icon-word">活动</span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right mui-icon fa fa-binoculars">
<span class="icon-word">网站导航</span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right mui-icon fa fa-book">
<span class="icon-word">学习线路图</span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right mui-icon fa fa-heart">
<span class="icon-word">收藏</span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right mui-icon fa fa-envelope-o">
<span class="icon-word">反馈</span>
</a>
</li>
</ul>
<div class="asidebar-board">
<a class="asidebar-tab">
<span class="mui-icon fa fa-gear"></span>
<br>
<span class="asidebar-tab-word">设置</span>
</a>
<a class="asidebar-tab">
<span class="mui-icon fa fa-bell-o"></span>
<br>
<span class="asidebar-tab-word">消息</span>
</a>
</div>
</aside>
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#asidebar" class="mui-icon mui-icon-bars mui-pull-left"></a>
<span class="mui-pull-right">
<a class="mui-icon mui-icon-search" id="search"></a>
<a class="mui-icon iconfont icon-shaixuan" id="qd-shaixuan"></a>
</span>
<h1 class="mui-title"></h1>
</header>
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">cared
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-media">
<a class="lesson-view">
<img class="mui-media-object mui-pull-left" src="images/html5-1.png">
<div class="mui-media-body">
HTML5
<p class='mui-ellipsis'>HTML5 是下一代的 HTML。 本教程向您讲解 HTML5 中的新特性。</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="article-view" data-id="2015010001">
<img class="mui-media-object mui-pull-left" src="images/muwu.jpg">
<div class="mui-media-body">
木屋
<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="article-view" data-id="2015010002">
<img class="mui-media-object mui-pull-left" src="images/cbd.jpg">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="article-view" data-id="2015010003">
<img class="mui-media-object mui-pull-left" src="images/yuantiao.jpg">
<div class="mui-media-body">
远眺
<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="article-view" data-id="2015010001">
<img class="mui-media-object mui-pull-left" src="images/muwu.jpg">
<div class="mui-media-body">
木屋
<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="article-view" data-id="2015010002">
<img class="mui-media-object mui-pull-left" src="images/cbd.jpg">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="article-view" data-id="2015010003">
<img class="mui-media-object mui-pull-left" src="images/yuantiao.jpg">
<div class="mui-media-body">
远眺
<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="article-view" data-id="2015010001">
<img class="mui-media-object mui-pull-left" src="images/muwu.jpg">
<div class="mui-media-body">
木屋
<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="article-view" data-id="2015010002">
<img class="mui-media-object mui-pull-left" src="images/cbd.jpg">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="article-view" data-id="2015010003">
<img class="mui-media-object mui-pull-left" src="images/yuantiao.jpg">
<div class="mui-media-body">
远眺
<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init({
preloadPages:[{
url:"class.html",
id:"class.html"
},{
url:"article.html",
id:"article.html"
},
{
url:"searchContent.html",
id:"searchContent.html"
}]
});
var pages = ["class.html","article.html","searchContent.html"];
var activeTarget;
var main = true;
mui(".mui-scroll-wrapper").scroll();
var wWidth = window.innerWidth;
var wHeight = window.innerHeight;
document.getElementById("asidebar").style.height = wHeight + "px";
mui.plusReady(function() {
// plus.webview.currentWebview().setStyle({
// scrollIndicator: "none"
// });
var cur = plus.webview.currentWebview();
var styles = {};
// for (var i = 0; i < pages.length; i++) {
// var sub = plus.webview.create(pages[i], pages[i], styles);
// sub.hide();
// cur.append(sub);
// }
document.getElementById("qd-shaixuan").addEventListener("tap", function() {
plus.webview.show("class.html", "slide-in-right");
activeTarget = "class.html";
main = false;
});
document.getElementById("search").addEventListener("tap",function(){
mui.openWindow({
url:"search.html",
id:"search.html",
show: {
aniShow: "slide-in-right",
duration: 200
},
waiting: {
autoShow: false
}
});
activeTarget = "search.html";
main = false;
});
mui(".mui-table-view-cell").on("tap",".lesson-view",function(){
mui.openWindow({
url:"lesson.html",
id:"lesson.html",
show:{
duration:300
},
waiting:{
autoShow:false
}
});
});
mui(".mui-table-view-cell").on("tap",".article-view",function(){
var id=this.getAttribute("data-id");
var detailPage=plus.webview.getWebviewById("article.html");
//自定义事件，可用于不同页面间的传值
mui.fire(detailPage,'showArticle',{
id:id
});
plus.webview.show("article.html", "slide-in-right");
activeTarget = "article.html";
main = false;
});
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
mui.back = function() {
//首次按键，提示‘再按一次退出应用’
if (main == true) {
if (!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
} else {
plus.webview.hide(activeTarget);
main = true;
}
};
});
</script>
</body>
</html>进入后经常白屏，偶尔可以显示
4 个回复
朋也 - https://tomoya92.github.io
我出现白屏的问题官方帮忙解决了，是dom结构不对导致的（就是body里的便签，class等都要严格按照官方给的来写，然后就不会白屏了）
DCloud_Android_ST
你的测试机是什么，什么型号的手机，系统版本
Dennis (作者)
android4.1.1
2015-08-26 12:43
朋也 - https://tomoya92.github.io
@DCloud_Android_ST 我也出现白屏问题了，点击一个产品进入详情的时候出现的
设备：5s ios8.x,9.x
android 摩托xt1570, mi4, 三星s3
DCloud_Android_ST
一直白屏吗，还是等待一会显示
朋也
一直白屏，时不时的出现白屏，我猜测可能是页面渲染的问题，android还好点，可以返回，ios只能退出重新打开app才能继续使用
2015-11-16 16:40
DCloud_Android_ST
看一下是不是内存不够用了，或者说你的页面什么操作导致的白屏。
2015-11-16 16:54