mui 自定义事件 & 打开新页面

时间：2022-12-01 22:39:51

自定义事件

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

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

列表页面代码如下：

//初始化预加载详情页面 mui.init({ preloadPages:[{ id:'detail.html', url:'detail.html' } ] }); var detailPage = null; //添加列表项的点击事件 mui('.mui-content').on('tap', 'a', function(e) { var id = this.getAttribute('id'); //获得详情页面 if(!detailPage){ detailPage = plus.webview.getWebviewById('detail.html'); } //触发详情页面的newsId事件 mui.fire(detailPage,'newsId',{ id:id }); //打开详情页面 mui.openWindow({ id:'detail.html' }); });

详情页面代码如下：

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

窗口管理 > 创建子页面

示例：Hello mui的首页其实就是index.html加list.html合并而成的，如下：
mui 自定义事件 & 打开新页面

index.html的作用就是显示固定导航，list.html显示具体列表内容，列表项的滚动是在list.html所在webview中使用原生滚动，既保证了滚动条不会穿透顶部导航，符合app的体验，也保证了列表流畅滚动，解决了区域滚动卡顿的问题。
list.html就是index.html的子页面，创建代码比较简单，如下：
mui.init({ subpages:[{ url:'list.html', id:'list.html', styles:{ top:'45px',//mui标题栏默认高度为45px； bottom:'0px'//默认为0px，可不定义； } }] });

打开新页面

做web app，一个无法避开的问题就是转场动画；web是基于链接构建的，从一个页面点击链接跳转到另一个页面，如果通过有刷新的打开方式，用户要面对一个空白的页面等待；如果通过无刷新的方式，用Javascript移入DOM节点（常见的SPA解决方案），会碰到很高的性能挑战：DOM节点繁多，页面太大，转场动画不流畅甚至导致浏览器崩溃； mui的解决思路是：单webview只承载单个页面的dom，减少dom层级及页面大小；页面切换使用原生动画，将最耗性能的部分交给原生实现。

示例1：Hello mui中，点击首页右上角的图标，会打开关于页面，实现代码如下：

//tap为mui封装的单击事件，可参考手势事件章节 document.getElementById('info').addEventListener('tap', function() { //打开关于页面 mui.openWindow({ url: 'examples/info.html', id:'info' }); });

示例2：从A页面打开B页面，B页面为一个需要从服务端加载的列表页面，若在B页面loaded事件发生时就将其显示出来，因服务器数据尚未加载完毕，列表页面为空，用户体验不好；可通过如下方式改善用户体验（最好的用户体验应该是通过预加载的方式）：第一步，B页面loaded事件发生后，不自动显示；

//A页面中打开B页面，设置show的autoShow为false，则B页面在其loaded事件发生后，不会自动显示； mui.openWindow({ url: 'B.html', show:{ autoShow:false } });

第二步，在B页面获取列表数据后，再关闭等待框、显示B页面

//B页面onload从服务器获取列表数据； window.onload = function(){ //从服务器获取数据 .... //业务数据获取完毕，并已插入当前页面DOM； //注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后； mui.plusReady(function(){ //关闭等待框 plus.nativeUI.closeWaiting(); //显示当前页面 mui.currentWebview.show(); }); }
 
 



 

 


  
 

 

标签：

相关文章