我費話少說，上正文；
區域滾動與下拉重新整理、上拉載入在安卓上有衝突，一但呼叫了區域滾動也就是：
<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......
通過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);
})複製程式碼具體詳細資訊請看官網dev.dcloud.net.cn/mui/ui/#dtp…
轉載請附上本文連結：juejin.im/post/5be261…