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...