MUI在Android與IOS上的一些小問題以及一些框架的用法
我費話少說,上正文;
區域滾動與下拉重新整理、上拉載入在安卓上有衝突,一但呼叫了區域滾動也就是:
<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