页面通过链接跳转
image.png
跳转过来的分页面一般就是这种：标题头部header和主题内容部分mui-content
image.png
这儿有个坑。这个a href链接貌似只在mbody中点击有效，如果因为这个问题无法点击跳转，那么在该页面添加这句代码：
mui('body').on('tap','a',function(){
window.top.location.href=this.href;
});
看看遮障栏怎么做
这是唯品会首页，其他分页面也基本都是header+content。
image.png
image.png
image.png
给一段首页代码，差不多内容都掏空了剩了一个架子，cv用然后自己填里面的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-off-canvas-right {
color: #fff;
}
.title {
margin: 35px 15px 10px;
}
.title+.content {
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
input {
color: #000;
}
#offCanvasSideScroll li,#offCanvasContentScroll li{
width:100%;
height:200px;
}
.mui-search{
display: inline-block;
}
</style>
</head>
<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<!--菜单部分-->
<aside id="offCanvasSide" class="mui-off-canvas-right">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title">侧滑导航</div>
<ul>
<li>AAA</li>
<li>AAA</li>
<li>AAA</li>
<li>AAA</li>
<li>AAA</li>
</ul>
</div>
</div>
</aside>
<!--主页部分-->
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="">
</div>
</header>
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul>
<li>
<a href="view/collection.html" >我的收藏</a>
</li>
<li>
<a href="view/myorder.html">我的订单</a>
</li>
<li>
<a href="view/personl.html">个人中心</a>
</li>
<li>AAA</li>
<li>AAA</li>
</ul>
</div>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init({
swipeBack: false,
});
//侧滑容器父节点
var offCanvasWrapper = mui('#offCanvasWrapper');
//主界面容器
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
//菜单容器
var offCanvasSide = document.getElementById("offCanvasSide");
//Android暂不支持整体移动动画
if (!mui.os.android) {
document.getElementById("move-togger").classList.remove('mui-hidden');
var spans = document.querySelectorAll('.android-only');
for (var i = 0, len = spans.length; i < len; i++) {
spans[i].style.display = "none";
}
}
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
var classList = offCanvasWrapper[0].classList;
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
//实现ios平台的侧滑关闭页面；
if (mui.os.plus && mui.os.ios) {
offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
plus.webview.currentWebview().setStyle({
'popGesture': 'none'
});
});
offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
plus.webview.currentWebview().setStyle({
'popGesture': 'close'
});
});
}
mui('body').on('tap','a',function(){
window.top.location.href=this.href;
});
</script>
</body>
</html>
列表详情页跳转：
html无非这种结构
<li class="mui-table-view-cell mui-media" v-for="item in items">
<a href="javascript:;" :data-guid="item.guid" @tap="open_detail(item)"></a>
</li>
这种用监听的方法实际操作在es5上面，有点失效。用es5的用第二个方法openwindon这个方法
1.1监听的方法
打开新闻详情相关方法：
function open_detail(item) {
//触发子窗口变更新闻详情
mui.fire(webview_detail, 'get_detail', {
guid: item.guid,
title: item.title,
author: item.author,
time: item.time,
cover: item.cover
});
//更改详情页原生导航条信息
titleNView.titleText = item.title;
webview_detail.setStyle({
"titleNView": titleNView
});
setTimeout(function() {
webview_detail.show("slide-in-right", 300);
}, 150);
}
what webview_detail？?
mui.plusReady(function() {
//预加载详情页
webview_detail = mui.preload({
url: 'detail.html',
id: 'news_detail',
styles: {
"render": "always",
"popGesture": "hide",
"bounce": "vertical",
"bounceBackground": "#efeff4",
"titleNView": titleNView
}
});
});
what mui.fire()??
作用：通过mui.fire()方法可以触发目标窗口的自定义事件
mui.fire(目标窗口的webview,'自定义事件名',{参数列表});
目标窗口监听这个自定义事件
window.addEventListener('自定义事件名', function() {
XXXXX
}, false);
what 自定义事件名??
这里有个“get_detail”我们摸一下
于是它出现再了detial.html中，详情页中
//监听自定义事件，获取新闻详情
document.addEventListener('get_detail', function(event) {
var guid = event.detail.guid;
if(!guid) {
return;
}
//前页传入的数据，直接渲染，无需等待ajax请求详情后
vm.cover = event.detail.cover;
vm.title = event.detail.title;
vm.author = event.detail.author;
vm.time = event.detail.time;
//向服务端请求文章详情内容
mui.ajax('http://spider.dcloud.net.cn/api/news/36kr/' + guid, {
type:'GET',
dataType: 'json', //服务器返回json格式数据
timeout: 15000, //15秒超时
success: function(rsp) {
vm.content = rsp.content;
},
error: function(xhr, type, errorThrown) {
mui.toast('获取文章内容失败');
//TODO 此处可以向服务端告警
}
});
});
原来它是个监听事件，用来获取数据
1.2openwindow的方法
主页：
mui.openWindow({
url:'yardlist_detial.html',
id:item.id,
extras: {
title: item.title
}
});
跳转页：
//窗口隐藏时，重置页面数据
mui.plusReady(function () {
var self=plus.webview.currentWebview();//获取当前窗体对象
var title_ = plus.webview.currentWebview().title;
var id_=self.id;
vmHeader.title = title_;
})
设置功能窗体切换
image.png
网友评论