mui框架如何加载2个子页面

把bottom的高度改一下，例如你底部固定为30px

subpages: [{

id: 'child_list',

url: 'child_lishtml',

styles: {

top: '40px',

bottom: 30px,

bounce: 'vertical'}

}]

在App开发中，页面间传值是很常见的开发需求，mui框架根据业务场景不同，提供了两种传值模式。

1、页面初始化时，通过扩展参数传值；

mui在初始化页面时，提供了extras配置参数，通过该参数可以设置页面参数，从而实现页面间传值；

mui框架在如下几种场景下，会执行页面初始化 *** 作：

- 通过muiopenWindow()打开新页面（若目标页面为已预加载成功的页面，则在openWindow方法中传递的extras参数无效）；

- 通过muiinit()方法创建子页面；

- 通过muiinit()方法预加载页面；

- 通过muipreload()方法预加载页面

示例，假设我们有如下需求：

在首页中打开关于页面时，传递当前产品名称及版本号，然后在关于页面中读取这两个参数并显示出来；

首页实现代码：

muiopenWindow({

url:'infohtml',

id:'infohtml',

extras:{

name:'mui',

version:'058'

}

});

\n

关于页面实现代码：

var self = pluswebviewcurrentWebview();

var name = selfname;

var version = selfversion;

\n

2、页面已创建，通过自定义事件传值

DOM结构

关于mui页面的dom，你需要知道如下规则。

固定栏靠前

所谓的固定栏，也就是带有mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（mui-bar-nav）、底部工具条(mui-bar-footer)、底部选项卡（mui-bar-tab）;这些元素使用时需遵循一个规则：放在mui-content元素之前，即使是底部工具条和底部选项卡，也要放在mui-content之前，否则固定栏会遮住部分主内容；

### 一切内容都要包裹在mui-content中

除了固定栏之外，其它内容都要包裹在mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：

[css] view plain copy

mui-bar-nav ~ mui-content {

padding-top: 44px;

}

mui-bar-footer ~ mui-content {

padding-bottom: 44px;

}

mui-bar-tab ~ mui-content {

padding-bottom: 50px;

}

你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，全部放在mui-content中。

始终为button按钮添加type属性

若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。

窗口管理

页面初始化：必须执行muiinit方法

mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次muiinit()方法；

页面跳转：抛弃href跳转

当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用[muiopenWindow方法](>

在一个页面中有多个Tab的问题可以这样来处理：

参照

工程项目管理/单位工程项目完工管理/申请列表

比如在此页面中有三个Tab切换：

那么要拆成四个页面一个Mange+三个Tab的页面

1、Manage页面：在Tabs中的TabsContent里面要有三个<div></div>这一定要有不能删掉。

<div class="page">

<div class="pageContent">

<div class="tabs" currentindex="2" eventtype="click">

<div class="tabsHeader">

<div class="tabsHeaderContent">

<ul>

<li><a href="aaspx" class="j-ajax"

><span>名称1</span></a></li>

<li><a href="baspx" class="j-ajax"

><span>名称2</span></a></li>

<li><a href="caspx" class="j-ajax"

><span>名称3</span></a></li>

</ul>

</div>

</div>

<div class="tabsContent" >

<div id="tab1"></div>

<div id="tab2"></div>

<div id="tab3"></div>

</div>

</div>

</div>

</div>

2、其他的三个页面的格式为：

<div class="panelBar">

<form id="pagerForm"

action="ProjectManage/FinishedProject/FinishedProjectManageAuditFinishedaspx"

method="post">

<input type="hidden" name="status" value="active"/>

<input type="hidden" name="pageNum" />

<input type="hidden" name="numPerPage" value="<%=numPerPageValue%>" />

</form>

<ul class="toolBar">

<li><a class="delete"

href="ProjectManage/FinishedProject/FinishedProjectManageAuditFinishedaspxfuid={sid_fin}"

target="navTabTodo"

title="确定要反审核吗"><span>反审核</span></a></li> </ul>

</div>

<table class="table" layouth="138">

</table>

<div class="panelBar">

<div class="pages">

<span>显示</span>

<select id="numPerPage" runat="server"

onchange="tabPageBreak(gpagejObj('tab2'),{numPerPage:thisvalue})">

<option value="3" selected="selected">3</option>

<option value="20">20</option>

<option value="30">30</option>

<option value="50">50</option>

</select>

<span>条，共<%=total %>条</span>

</div>

<div class="pagination" targettype="navTab" totalcount="<%=total

%>" numperpage="<%=numPerPageValue %>" currentpage="<%=pageNum %>" tab="tab2">

</div>

</div>

3、在其他的三个页面中一开始就应该写<div class="panelBar"></div

class="panelBar">，前面的样式不需要，因为我们加载的时候前面的样式已经加载了所以只需要从panelBar开始加载即可。

比如上面显示处理分页的pagerForm也可以放到pagelBar里面。不能放到外面，不会加载的。

4、对于分页因为涉及到多个Tab的同时分页的问题，但是一个页面只有一个pagerForm考虑到假如修改为多个pagerForm的话，问题更加繁琐，

所以现在我们拆开来处理。里面的分页稍作了修改，以前我们用navTabPageBreak()；现在我们用tabPageBreak并将当前tab2加了前缀的的值传到脚本中。

以上就是关于mui框架如何加载2个子页面全部的内容，包括:mui框架如何加载2个子页面、mui 主页面怎么向子页面传值、huilder和mui开发的app获取个推推送的消息的click事件应该写在哪等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！