带loading中间态的视图
如果想异步去加载视图内容，在视图内容未加载完成前出现loading界面请参考这个例子的用法。
请在移动浏览器或打开chrome开发人员工具模拟移动浏览器查看demo。
Source
Output
QRCode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link href="//g.alicdn.com/kissy/k/5.0.1/css/base.css" rel="stylesheet"/>
<link href="//g.alicdn.com/kissy/k/5.0.1/navigation-view/assets/dpl.css" rel="stylesheet">
<link href="//g.alicdn.com/kissy/k/5.0.1/scroll-view/assets/dpl.css" rel="stylesheet"/>
<style>
body,html {
height: 100%;
}
.ks-navigation-bar {
position: fixed;
height: 47px;
width: 100%;
box-sizing: border-box;
z-index: 10;
}
.ks-navigation-view-content {
margin-top: 47px;
}
ul, li {
margin: 0;
padding: 0;
}
.nav {
color: #000;
background: white;
border: 1px solid #aaa;
padding-left: 0;
}
.nav > li {
text-indent: 0;
font-size: 1.5em;
margin: 0;
display: block;
position: relative;
list-style-type: none;
vertical-align: middle;
box-sizing: border-box;
padding: .5em .7em;
padding-left: 1em;
line-height: 1.6em;
overflow: hidden;
color: #000;
border: 0;
background: transparent;
border-radius: 0;
border-top: 1px solid rgba(180, 180, 180, 0.5);
}
.nav > li:first-child {
border-top: 0;
}
.nav a {
line-height: inherit;
text-decoration: none;
margin: -0.5em -0.7em;
margin-left: -1em;
padding-left: 1em;
color: #000;
display: block;
position: relative;
list-style-type: none;
vertical-align: middle;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: .5em .7em;
}
.nav a:after {
-webkit-text-fill-color: #fff;
-webkit-transform: rotate(45deg);
vertical-align: middle;
margin-left: -0.2rem;
border-style: solid;
border-color: #777;
content: "\a0";
display: block;
position: absolute;
right: 1rem;
top: 50%;
margin-top: -0.32rem;
color: #999ea9;
width: .66rem;
height: .64rem;
border-width: 0;
-webkit-box-shadow: inset -0.2rem .2rem 0 #999ea9;
box-shadow: inset -0.2rem .2rem 0;
}
.nav .list-item-active a {
background: #d9d9d9;
}
.ks-navigation-view-content {
background: #eeeeee;
}
.anim-title {
text-align: center;
font-size: 18px;
line-height: 24px;
color: #444;
text-shadow: rgba(255, 255, 255, 0.3) 0 1px 0;
padding: 10px;
width: 75%;
margin: 0 auto;
}
.anim-content {
text-align: center;
font-size: 18px;
line-height: 24px;
color: #444;
text-shadow: rgba(255, 255, 255, 0.3) 0 1px 0;
padding: 10px;
width: 75%;
margin: 0 auto;
}
.ks-navigation-view-content > .ks-navigation-view-loading.ks-navigation-view-loading-hidden, .ks-navigation-view-content > div.ks-index-view-hidden, .ks-navigation-view-content > div.ks-view-with-loading-hidden{
display: none;
}
.after-loading{
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 50px;
}
</style>
</head>
<body>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js"></script>
<script>
require(['navigation-view','navigation-view/bar', 'component/control', 'node', 'promise'],function (NavigationView, Bar, Control, $, Promise) {
var win = $(window);
var navigationView = new NavigationView({
loadingHtml: '<div class="ks-navigation-view-loading-outer">' +
'<div class="ks-navigation-view-loading-inner"></div>' +
'</div>', //设置loading内容
render: 'body'
}).render();
var bar = new Bar({
navigationView: navigationView,
elBefore: navigationView.get('contentEl')
}).render();
var IndexView = Control.extend({
createDom : function(){
this.get('el').html('<ul class="nav"><li class="list-item">View with Loading</li></ul>');
},
bindUI : function(){
this.get('el').delegate('click', '.list-item', this.goNextView, this);
},
goNextView : function(ev){
navigationView.push({
xclass : 'view-with-loading',
title : 'view with loading'
})
}
},{
xclass : 'index-view'
});
var ViewWithLoading = Control.extend({
enter : function(){
var self = this;
self.defer = new Promise.Defer(); //给view设置defer/promise才会在页面未加载完的出现loading界面
self.promise = self.defer.promise;
win.on('resize', self.sync, self);
setTimeout(function(){ //异步执行。可以是Ajax去获取页面内容等
self.get('el').html('<div class="after-loading">after loading...</div>');
self.defer.resolve(); //通知loading结束
},1500)
},
},{
xclass : 'view-with-loading'
});
navigationView.push({
xclass : 'index-view',
title : 'IndexView'
});
});
</script>
</body>
</html>