mui框架开发中下拉刷新页面没法添加区域滚动的问题

这几天在用到mui框架开发app时遇到了一些前端页面构建的一些问题，在鼓捣了一天也没有太好的解决办法后，特意记录下这个问题。

在mui框架初始的默认下拉刷新上拉加载的结构之中，没法添加区域滚动的问题

此问题出如今构建相似原生手机端app时遇到的，大概需求是要在一个可下拉刷新的页面之中点击筛选框弹出特定的下拉列表。原本看到mui框架对于区域滚动已经封装了本身的组件后，以为并无太大问题。但在实际调试之中发现，利用其封装好的遮罩层Popover来制做弹出菜单时，参照官方文档和其提供的demo示例使用

<div class="mui-scroll-wrapper">  
  <div class="mui-scroll">  
     <!-- 此处放置滚动区域内容 -->  
  </div>  
</div>

对popover进行包裹后，在普通页面之中是没有问题的，可是加入到了父子嵌套刷新的页面之中就会出现滚动穿透的问题，popover层的滚动事件不会触发，反而处于遮罩层的列表会继续触发滚动事件。同时在dcloud问答社区也找到了前辈的提问，可是并未有人解决。（点击查看问题连接）另外因为父子页面也会引起另外一个问题：
父页面的tab切换栏不能在子页面popover弹出时候进行遮罩来阻止操做。

1. 利用事件的冒泡属性，阻止popover层的滚动事件冒泡到遮罩层。
   这个尝试以失败了结，首先这个下拉刷新上来加载页面是经过mui框架封装的父子webview功能来实现的，利用jq的preventDefault()方法并不能取得效果，并且菜单列表仍是没法正常的初始化滚动。

2. 抛弃popover的区域滚动，进行高度自适应的填充。
   好吧，这竟然也算一个解决方案，对于不须要用太多处理的较短筛选列表是能够采用这个方法的，对于第二个问题也是由一种思路能够弥补的，咱们放到第三种方法一块儿讨论。

3. 利用mui框架官方示例之中的另外一个上下拉刷新组件来取代原有的父子webview刷新页面，这样作的好处是能够构建出上下拉和区域滚动兼容的一个页面来。
   可是与之伴随的问题也来了，这个必须引用额外的js才能够实现，并且总体效果相对于原生的拖动有较大的差别。对于父页面的遮罩，若是利用mui的自定义事件向父页面触发事件应该是能够解决的，本身利用css遮罩层触发popover的弹出操做。可是popover总体在子页面的操做并非很流畅，须要进一步利用fire方法在父页面向子页面发请求来操做。总体来讲是一种解决思路。

4. 利用H5+的nativeUI来构建遮罩层替代popover组件实现需求。
   这个想法是在dcloud的官方文章之中找到的，本人不才并无接触过安卓和ios的原生开发，以后搜索并了解了下这个原生UI的功能。在H5+的文档上发现这个nativeObj提供的view对象是能够达到全屏遮罩层的效果。

可是这个遮罩是全webview置顶的，并且上面没法放置任何html代码，故而没法达到popover的效果。
继续寻找发如今官方给的H5+的示例之中有wbview遮罩层的示例，研究了一番发现有一个直接封装好的方法，能够直接对当前webview设置遮罩层同时绑定遮罩层的点击事件。代码以下：

// 建立Webview窗口带遮罩层  
var wd = plus.webview.create('http://www.dcloud.io/','dcloud',{mask:'rgba(0,0,0,0.5)'});  
wd.show();  
  
// 动态修改Webview窗口的遮罩层  
var ws=plus.webview.currentWebview();  
ws.setStyle({mask:"rgba(0,0,0,0.5)"});  
// 用户点击Webview窗口后不显示遮罩层  
ws.addEventListener("maskClick",function(){  
    ws.setStyle({mask:"none"});  
},false);

利用这个方法能够将要处理的popover弹出层放置到一个新的子webview中去，这样设计的两个问题就都解决了。并且遮罩层不用本身去手写，相对而言事件的触发也没有变得太多，的确是一个更好的办法。

最终，利用方法4的思路，在子页面触发事件，分别向父页面fire事件打开遮罩层（点击后隐藏）并打开菜单页（放置要处理的弹出菜单）。在菜单页关闭的同时也关闭父页面的遮罩，触发子页面的数据刷新，问题就解决了。

ps.调试发现菜单栏的webview最好不要屡次建立，使用时hide和show比屡次调用create要流畅很多。

追加dcloud一实现参考方法：http://ask.dcloud.net.cn/arti...