mui H5+实现子页面的创建

最新推荐文章于 2025-04-28 13:19:10 发布

Tango糖果π

最新推荐文章于 2025-04-28 13:19:10 发布

阅读量542

点赞数

文章标签：数学建模

本文链接：https://blog.youkuaiyun.com/mahaokun/article/details/131005720

版权

文章介绍了两种在H5环境中管理子页面的方法：一是使用mui框架的subpages接口，二是通过plus.webview.create函数创建并控制子页面的显示。在方法一中，子页面自动按顺序叠加，而方法二允许更灵活的控制子页面的隐藏和显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：利用H5+接口subpages

mui.init({
	subpages:[
		{
		  url:'home.html',
		  id:'home',
		  styles:{
			top: '45px',
			bottom: '50px'
		  },
		  extras:{},
		  show: {
			autoShow: false
		  }
		},
		{
		  url:'my.html',
		  id:'my',
		  styles:{
			top: '45px',
			bottom: '50px'
		  },
		  extras:{},
		  show: {
			autoShow: false
		  }
		},
	]
})

注：后面创建的子页面会出现在最顶端

方法二：plus.webview.create

mui.plusReady(function () {
	var curr = plus.webview.currentWebview()
	
	var sub_pages = ['home.html','my.html']
	var sub_ids = ['home', 'my']
	var sub_styles = {
		top: '45px',
		bottom: '50px'
	}
	for(var i=0; i<sub_pages.length; i++) {
		console.log(i);
		var sub = plus.webview.create(sub_pages[i], sub_ids[i], sub_styles)
		if(i>0) {
			sub.hide()
		}
		curr.append(sub)
	}
	
	mui('#nav-bar').on('tap', 'a', function(){
		var id = this.getAttribute('id')
		document.getElementById('apptitle').innerHTML = id
		plus.webview.show(id)
	})
})