本节知识点
- 实现加载子页面
需求
为了防止上拉加载下拉刷新出现卡顿，所以在加载子页面的时候我们采取的就是除了头部和尾部，中间的部分我们采取的就是加载子页面。
重点要记住的就是下面初始化的时候传递参数
父元素写的代码
<script type="text/javascript">
mui.init({
subpages: [{
url: "child.html", //子页面HTML地址，支持本地地址和网络地址
id: "child", //子页面标志
styles: {
top: "44px", //子页面顶部位置子页面要是有导航设置为0就直接覆盖了，所以一般是44PX
bottom:"50px", //子页面底部位置一般情况就是50PX这样不会覆盖底部导航
width: "100%", //子页面宽度，默认为100%
//height: "100%" //子页面高度，默认为100%,底部要是有导航则不能加高度100%否则会遮盖
},
extras: {
name: "名称",
sex: "男"
} //额外扩展参数
}
]
});
</script>
- child.html写的代码
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
var self = plus.webview.currentWebview();
console.log(self.name + "||" + self.sex); //接收参数
})
</script>
- 父元素全部代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>创建子页面</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">加载子页面</h1>
</header>
<div class="mui-content">
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
subpages: [{
url: "child.html", //子页面HTML地址，支持本地地址和网络地址
id: "child", //子页面标志
styles: {
top: "44px", //子页面顶部位置子页面要是有导航设置为0就直接覆盖了，所以一般是44PX
bottom:"50px", //子页面底部位置一般情况就是50PX这样不会覆盖底部导航
width: "100%", //子页面宽度，默认为100%
//height: "100%" //子页面高度，默认为100%,底部要是有导航则不能加高度100%否则会遮盖
},
extras: {
name: "名称",
sex: "男"
} //额外扩展参数
}
]
});
</script>
</html>
- child.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
I这里面就是加载子页面的内容
</a>
</li>
</ul>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
var self = plus.webview.currentWebview();
console.log(self.name + "||" + self.sex);
})
</script>
</body>
</html>
作者：我拥抱着我的未来
链接：https://www.jianshu.com/p/2fe34045449b
來源：简书