大部分项目开发中,在一个窗口当中常常分为上中下结构的页面设计,而仅仅需要中间内容部分做页面切换,头部只需要变更几个文本内容. 在 mui.init()初始化中, subpages定义了子页面的引入方式和位置. 那么问题来了，subpages 能定义多个子页面吗? 如和定义呢?如果 subpages 无法载入多个,有什么方式可以做到呢?
gccoykf
- 发布：2015-12-14 11:08
- 更新：2019-07-23 10:23
- 阅读：4226
chender - 与人为善
肯定可以定义多个子webview啊，官方的那个通过点击tab切换webview的那个样例，你同时把四个子webview都显示出来，然后通过设置style让他们从上到下依次排列；你要到就是类似这样的效果吧；
gccoykf (作者)
要是其实是用webview将一个页面分成3个部分,顶部需要根据页面变更文本内容,底部固定内容和样式不变,中间为主题部分,要变更的都在中间这部分. 尝试了在 mui 初始化的时候传入的 subpages 中传入多个页面链接,貌似最后一个会覆盖之前的,代码如下:
subpages:[
{
url:'libs/header.html',//子页面HTML地址，支持本地地址和网络地址
id:'header',//子页面标志
styles:{
top:0,
},
},
{
url:'libs/footer.html',//子页面HTML地址，支持本地地址和网络地址
id:'footer',//子页面标志
styles:{
bottom:0,//子页面顶部位置
},
}
]
chender - 与人为善
肯定使能预加载多个的，你说的覆盖指的是？
-
-
不好意思，还是没明白你的意思，mui.init你只调了一次把，然后subPages里面你传了一个数组对吧(多个页面的描述)，然后“只有最后一个设置生效”说的是只有subPages里面的最后一个页面被预加载了？你是怎么判断只有最后一个生效了。
2015-12-14 11:53
-
-
-
这种大概是用模板做，你看下Hello mui里的模板的例子。
-
gccoykf (作者)
hello mui里面的例子貌似没有在一个页面中加载多个webview的例子,文档中给出的“窗口管理->创建子页面”中只有2个子窗口同时渲染(index.html+list.html)，即在mui.int()中使用subPages进行初始化,如果要使用3个子窗口同时渲染貌似没看到这类文档,而且在subPages数组中只有最后一个设置生效
2015-12-14 13:11
-
-
-
-
chender - 与人为善
你估计是把几个webview叠一起了，append方法里面有显示子webview的逻辑，所以最后一个webview最后被append，也就显示在了最上面，给你的表象就是：只有最后一个成功了
-
gccoykf (作者)
应该是这种情况,我看了实例里面的页面,用for循环的方式append进去,用数组的方式设置是要设置高度吧，估计我之前是没有给高度值所以默认是100%的高度就覆盖了.谢谢你的回答!非常感谢!!
2015-12-14 17:17
<!-- #ifdef H5 -->
<view v-for="(item,index) in pageUrlList" :key="index" v-show="index==pageNum">
<iframe :src="item" style="position: absolute; display: block; border: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%;"></iframe>
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<web-view :src="pageUrl"></web-view>
<!-- #endif --> 动态改变页面地址即可
gccoykf (作者)
那需要用预载的方式吗？初始化的时候无法直接载入多个吧
2015-12-14 11:31