mui框架----传递数据到另一页面（父子页面传值）

APP端与WEB端不同，APP端的页面的数据是要每次从服务器端请求下来的，即是通过接口把数据请求下来，然后重新渲染到页面上，每个页面都是要接口的。而WEB端是可以将接口的数据直接传输到子页面，而不需要重新刷新页面。

mui的官方文档上就已经写好了mui传值的方法。（https://dev.dcloud.net.cn/mui/event/）
即：假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻，详情页面再动态向服务器请求数据。

mui要实现类似需求可通过如下步骤实现：

在列表页面中预加载详情页面（假设为detail.html）
列表页面在点击新闻标题时，首先，获得该新闻id，触发详情页面的newsId事件，并将新闻id作为事件参数传递过去；然后再打开详情页面；
详情页面监听newsId自定义事件

首先，在列表页中写入

//初始化预加载详情页面
mui.init({
		preloadPages:[{
			id:'article_details',
			url:'article_details.html'           
		}]
	}); 
	var detailPage = null;
	//添加列表项的点击事件，此处的.mui-content是想要通过点击获取数据的class, li是class下的点击数据所在的标签，根据情况的不同，也可以是a标签和div标签。这两个地方是要根据的实际情况进行修改的。
	mui('.mui-content').on('tap', 'li', function(e) {
		var id = this.getAttribute('id');    //前面的id是自己定义的，后面的id是在li标签里面的id
		//alert(id);
		if(!detailPage){
			detailPage = plus.webview.getWebviewById('article_details');
		}
 	 //触发详情页面的newsId事件
		mui.fire(detailPage,'newsId',{   //newsId是监听事件，可自行修改
			id:id
		});
		//打开详情页面        
		mui.openWindow({
			id:'article_details'
		});
	});

其中，该列表页面的所对应的代码为，即上面说的.mui-content和li标签要填写的地方。
在这里插入图片描述
然后，在详情页面上面写入。

//newsId自定义事件监听
window.addEventListener('newsId',function(event){
  //获得事件参数
  var id = event.detail.id;  //前面的id是自己定义的，后面的id是上一个列表页传过来的
  //根据id向服务器请求新闻详情
});

提醒一点，列表页要获取到的id必须是确定的值，如果是非确定，就不可以传到详情页。

最后，根据在列表页获取到的id就可以在详情页那里写入ajax就可以实现，列表页对应的数据传到详情页了。

小编的总结就是：
刚开始我是通过这样子的方法吧后端的数据进行渲染到列表页的，到是获取不到点击事件的id
在这里插入图片描述
在这样的方法里面，id不是一个确定的值，也就无法通过点击事件获取到相应的id。

小编后面换了一个方法，即
在这里插入图片描述
就是通过用art-template模板引擎来渲染数据，这样跟上面的方法一样都可以把数据渲染到页面上，而且这样子的方法是可以通过点击事件获取到id的值的。（有兴趣的小伙伴可以去官网看一下art-template的使用方法，这个也是很好用的模板引擎）

mui框架----传递数据到另一页面（父子页面传值）

猜你喜欢