示例

假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻，详情页面再动态向服务器请求数据，mui要实现类似需求可通过如下步骤实现：

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

列表页面代码如下：

  1. //初始化预加载详情页面
  2. mui.init({
  3.   preloadPages:[{
  4.     id:'detail.html',
  5.     url:'detail.html'           
  6.   }
  7.   ]
  8. });
  10. var detailPage = null;
  11. //添加列表项的点击事件
  12. mui('.mui-content').on('tap', 'a', function(e) {
  13.   var id = this.getAttribute('id');
  14.   //获得详情页面
  15.   if(!detailPage){
  16.     detailPage = plus.webview.getWebviewById('detail.html');
  17.   }
  18.   //触发详情页面的newsId事件
  19.   mui.fire(detailPage,'newsId',{
  20.     id:id
  21.   });
  22. //打开详情页面          
  23.   mui.openWindow({
  24.     id:'detail.html'
  25.   });
  26. });

详情页面代码如下：

  1. //添加newId自定义事件监听
  2. window.addEventListener('newsId',function(event){
  3.   //获得事件参数
  4.   var id = event.detail.id;
  5.   //根据id向服务器请求新闻详情
  6.   .....
  7. });

扩展阅读

代码块激活字符:

mfire

mui遵循 MIT License