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就能夠擁有回彈效果；
<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張圖片，圖片順序變爲：四、一、二、三、四、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
複製代碼

顯示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…