MUI在Android與IOS上的一些小問題以及一些框架的用法

教父君發表於2018-11-07

我費話少說，上正文；

區域滾動與下拉重新整理、上拉載入在安卓上有衝突，一但呼叫了區域滾動也就是：

<div class="mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--這裡放置真實顯示的DOM內容-->
	</div>
</div>複製程式碼

那麼區域滾動在安卓上將無法滑動，iOS則沒有影響。

並且就算iOS沒有初始化區域滾動也沒有影響。

//初始化區域滾動
mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 減速係數，係數越大，滾動速度越慢，滾動距離越小，預設值0.0006
});
只要在下拉重新整理與上拉載入的標識div里加上class為mui-scroll就可以擁有回彈效果；
<div  id="goodsList" class="posit_rel lin-item">//重新整理標識div
    <div class="mui-scroll">
       <!--  主要內容 -->
    </div>
</div>這樣的話兩邊就可以正常進行下拉重新整理和上拉載入了，但是iOS要設定滑動區域的高度限制。
複製程式碼

至於橫向區域滾動與下拉重新整理衝突的問題

加上這個樣式,就可以解決了

 .mui-plus-pullrefresh .mui-scroll { position: absolute; width: 100%; } 複製程式碼

如果上面的不行,用下面的樣式: 寬度根據自己的情況來定,但 100%和auto不行

 .mui-scroll-wrapper .mui-scroll{ width: 544px !important; } 複製程式碼

呼叫原生等待模態窗不制止其他事件的執行：

plus.nativeUI.showWaiting("正在載入...",{modal:false});
當modal為false時等待框不阻止其他事件的執行，比如點選返回等，預設為true；
複製程式碼

iOS滑動監聽問題：

因為iOS不能實時監聽$(window).on('scroll'),會在滑動停止後才觸發，touchmove事件也沒法監聽回彈效果，所以我們還是的呼叫區域滾動，用div模擬

<div class="mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--這裡放置真實顯示的DOM內容-->
	</div>
</div>
//初始化區域滾動
var serve_scroll = mui('.mui-scroll-wrapper').scroll();
//滾動高度
$('.mui-scroll-wrapper').scroll(function () {
serve_scroll.y  //高度
mui('.server_scroll_wrapper').scroll().scrollTo(0, 0, 100);//100毫秒滾動到頂
});
複製程式碼

iOS底部input position: fixed;定位問題

在安卓上input聚焦時，input定位不會錯亂，但是在iOS中position: fixed;就變成absolute了，所以我們要把這個input放在最外面。

  plus.webview.currentWebview().setStyle({
            softinputMode: "adjustResize"  // 彈出軟鍵盤時自動改變webview的高度
        });
        if(mui.os.ios){
            if (screen.height >=667 && screen.width >=375){
                //蘋果6及以上
                $(".comment_btn").css('position','absolute');
            }
            var interval;
            //解決第三方軟鍵盤喚起時底部input輸入框被遮擋問題
            var bfscrolltop = document.body.scrollTop;//獲取軟鍵盤喚起前瀏覽器滾動部分的高度
            $(".comment_btn").focus(function(){//在這裡‘input.inputframe’是我的底部輸入欄的輸入框，當它獲取焦點時觸發事件
                interval = setInterval(function(){//設定一個計時器，時間設定與軟鍵盤彈出所需時間相近
                    document.body.scrollTop = document.body.scrollHeight;//獲取焦點後將瀏覽器內所有內容高度賦給瀏覽器滾動部分高度
                },100)
            }).blur(function(){//設定輸入框失去焦點時的事件
                clearInterval(interval);//清除計時器
                document.body.scrollTop = bfscrolltop;
                //將軟鍵盤喚起前的瀏覽器滾動部分高度重新賦給改變後的高度
            });
這些在mui上真機執行是可以的，但是打包的時候加入iOS原生的東西就不行了，具體原因我也找不出來。。。複製程式碼

自定義事件mui.fire（）；

執行自定義事件，在某頁面新增自定義事件，然後在任意頁面都可執行，只要正確找到這個自定義事件頁面的ID，例如在列表頁面新增自定義事件，在詳情頁面執行。

新增自定義事件監聽操作和標準js事件監聽類似，可直接通過window物件新增，如下：

//列表頁面
window.addEventListener('newsId',function(event){
  //通過event.id可獲得傳遞過來的引數內容
  ....
});
複製程式碼

  //詳情頁面
  //獲取列表頁的ID
  var  list = plus.webview.getWebviewById('list.html');
  //觸發列表頁面的newsId事件
  mui.fire(list,'newsId',{
    id:id //傳過去的引數
  });複製程式碼

圖片輪播

預設不支援迴圈播放，DOM結構如下：

<div class="mui-slider">
  <div class="mui-slider-group">
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
  </div>
</div>複製程式碼

若要支援迴圈，則需要在.mui-slider-group節點上增加.mui-slider-loop類，同時需要重複增加2張圖片，圖片順序變為：4、1、2、3、4、1，程式碼示例如下：

<div class="mui-slider">
  <div class="mui-slider-group mui-slider-loop">
    <!--支援迴圈，需要重複圖片節點-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
    <!--支援迴圈，需要重複圖片節點-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
  </div>
</div>複製程式碼

mui框架內建了圖片輪播外掛，通過該外掛封裝的JS API，使用者可以設定是否自動輪播及輪播週期，如下為程式碼示例：

//獲得slider外掛物件
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自動輪播週期，若為0則不自動播放，預設為0；
});複製程式碼

因此若希望圖片輪播不要自動播放，而是使用者手動滑動才切換，只需要通過如上方法，將interval引數設為0即可。

若要跳轉到第x張圖片，則可以使用圖片輪播外掛的gotoItem方法，例如：

//獲得slider外掛物件
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳轉到第index張圖片，index從0開始；複製程式碼

注意：mui框架會預設初始化當前頁面的圖片輪播元件；若輪播元件內容為js動態生成時（比如通過ajax動態獲取的營銷資訊），則需要在動態生成完整DOM (包含mui-slider下所有DOM結構) 後，手動呼叫圖片輪播的初始化方法；

mui頁面地址：http://dev.dcloud.net.cn/mui/ui/#gallery

mui選擇器，包括日期選擇器等

官網是這麼說的：

*poppicker元件依賴mui.picker.js/.css mui.poppicker.js/.css請務必在mui.js/css後中引用,也可統一引用壓縮版本:mui.picker.min.js

但是進過個人實測，最好還是引入壓縮版本mui.poppicker.js/.css和mui.picker.min.js比較好，否則有可能報錯picker is no......

檔案下載地址：

github.com/jiaofuzeng/…

通過new mui.PopPicker()初始化popPicker元件

 var picker = new mui.PopPicker(); 複製程式碼

給picker物件新增資料

setData() 支援資料格式為: 陣列

 picker.setData([{value:'zz',text:'智子'}]); 複製程式碼

顯示picker

 picker.show( SelectedItemsCallback ) 複製程式碼

例項

 var picker = new mui.PopPicker();
 picker.setData([{value:'zz',text:'智子'}]);
 picker.show(function (selectItems) {
    console.log(selectItems[0].text);//智子
    console.log(selectItems[0].value);//zz 
  })複製程式碼

日期元件通過new mui.DtPicker()初始化DtPicker元件

	 var dtPicker = new mui.DtPicker(options); options為型別 ‘date’型別為YYYY-MM-DD
複製程式碼