简单使用 NavigationView
这个demo定义了两个View类来显示内容，IndexView为首页，TbDetailView为详情页。并利用了 scroll-view 和 scroll-view/plugin/scrollbar 两个模块来使得页面能够滚动显示。
请在移动浏览器或打开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>
html, body {
height: 100%;
}
.wrap {
display: -webkit-box;
height: 100%;
}
.wrap .list-item{
padding: 10px;
border: 1px solid #000000;
}
.wrap .detail{
margin-top: 50px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrap">
</div>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js"></script>
<script>
require(['navigation-view','navigation-view/bar','node','scroll-view','scroll-view/plugin/scrollbar'],function (NavigationView, Bar, $, ScrollView, ScrollBar) {
var win = $(window);
var navigationView = new NavigationView({
render: '.wrap'
}).render();
var bar = new Bar({
navigationView: navigationView,
elBefore: navigationView.get('contentEl')
}).render();
var TbDetailView = ScrollView.extend({}, {
xclass: 'tb-detail-view',
ATTRS: {
plugins: [ScrollBar]
}
});
var IndexView = ScrollView.extend({
bindUI: function () {
this.get('contentEl').delegate('click', '.list-item', this.onSelect, this);
},
onSelect: function (e) {
var content = e.currentTarget.innerHTML;
navigationView.push({
xclass: 'tb-detail-view',
content: '<div class="detail">This is ' + content + ' detail!</div>',
animation : ['slide-top', 'slide-bottom'] //使用动画效果切换视图
});
},
enter: function () {
this.sync();
win.on('resize', this.sync, this);
},
leave: function () {
win.detach('resize', this.sync, this);
},
createDom: function () {
var ret = [];
for (var i = 0; i < 20; i++) {
ret.push('<div class="list-item">' + i + '</div>');
}
this.get('contentEl').html(ret.join(''));
}
}, {
xclass: 'tb-index-view',
ATTRS: {
plugins: [ScrollBar]
}
});
navigationView.push({
xclass: 'tb-index-view'
});
});
</script>
</body>
</html>