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

摘要： 我費話少說，上正文； 區域滾動與下拉重新整理、上拉載入在安卓上有衝突，一但呼叫了區域滾動也就是： <div class="mui-scroll-wrapper"> <div class="mui-scroll">...

我費話少說，上正文；

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

<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就可以擁有回彈效果；
<divid="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 放在最外面。

mui.plusReady(function() {
plus.webview.currentWebview().setStyle({
softinputMode: "adjustResize"// 彈出軟鍵盤時自動改變webview的高度
});
//iOS 6一下只要呼叫上面的就行了
if (mui.os.ios) { if (812>screen.height >=667 && screen.width >=375){ //蘋果6及以上
$(".comment_btn").css('position','absolute');
} } 
 });
這些在mui上真機執行是可以的，但是打包的時候加入iOS原生的東西就不行了，具體原因我也找不出來。。。複製程式碼

自定義事件mui.fire（）；

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

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

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

//詳情頁面
//獲取列表頁的ID
varlist = 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......

檔案下載地址： ofollow,noindex">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
複製程式碼

顯示picker

dtPicker.show( SelectedItemsCallback ) 
複製程式碼

例項

var dtPicker = new mui.DtPicker(); 
dtPicker.show(function (selectItems) { 
console.log(selectItems.y);//{text: "2016",value: 2016} 
console.log(selectItems.m);//{text: "05",value: "05"} 
})複製程式碼

*如果設定多級預設值可依次獲取每一層級Picker物件並設定預設值,如下:

var picker = new mui.PopPicker({
layer: 2
});
picker.setData([{
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "東城區"
}]
}, {
value: '120000',
text: '天津市',
children: [{
value: "120101",
text: "和平區"
}, {
value: "120102",
text: "河東區"
}, {
value: "120104",
text: "南開區"
}
]
}])
picker.pickers[0].setSelectedIndex(1);
picker.pickers[1].setSelectedIndex(1);
picker.show(function(SelectedItem) {
console.log(SelectedItem);
})複製程式碼

具體詳細資訊請看官網http://dev.dcloud.net.cn/mui/ui/#dtpicker