碼上快樂

相關內容    簡體    繁體

MUI組件四：選擇器、滾動條、單選框、區域滾動和輪播組件

本文轉載自   查看原文   2017-06-07 13:13   4726 

 

目錄(?)[+]

 

1、picker（選擇器）

  mui框架擴展了pipcker組件,可用於彈出選擇器,在各平台上都有統一表現.poppicker和dtpicker是對picker的具體實現。*poppicker組件依賴mui.picker.js/.css mui.poppicker.js/.css請務必在mui.js/css后中引用,也可統一引用 壓縮版本:mui.picker.min.js

（1）、popPicker

適用於彈出單級或多級選擇器

a、通過new mui.PopPicker()初始化popPicker組件

          var picker = new mui.PopPicker();

b、給picker對象添加數據，setDate() 支持數據格式為: 數組

         picker.setData([{value:'zz',text:'智子'}]);

c、顯示picker

         picker.show( SelectedItemsCallback )

實例

 

[html]  view plain  copy
 
  1.  var picker = new mui.PopPicker();  
  2.  picker.setData([{value:'zz',text:'智子'}]);  
  3.  picker.show(function (selectItems) {  
  4. console.log(selectItems[0].text);//智子  
  5. console.log(selectItems[0].value);//zz  
  6.  })  

 

API詳解

a、new PopPicker({PopPicker.options}})

     layer：Type: Intpicker，顯示列數

     buttons：Type: Array，picker顯示按鈕

     如:new mui.PopPicker({button:['cancle','ok']})

b、setData([data])

     參數:data：Type: Array，填充數據

     如:picker.setData([{value:'zz',text:'智子'}])

c、getSelectedItems()

     返回值[data]：Type: Array，獲取選中的項（數組）

     如:picker.getSelectedItems()

d、show( getSelectedItems )

     返回值:[data]：Type: Array，獲取選中的項（數組）

     如:picker.show(function(getSelectedItems){console.log(getSelectedItems)})

     *return false; 可以阻止選擇框的關閉

e、hide()：隱藏picker

     如:picker.hide()

f、dispose()：釋放組件資源(釋放后將將不能再操作組件)

     如:picker.dispose()

* 通常情況下，不需要釋放組件資源，初始化之后，可以一直使用。

* 當內容較多，如不釋放組件資源，在某些設備上可能會卡頓。

* 所以每次用完便立即調用 dispose() 進行釋放,下次用時再創建新實例。

（2）、dtpicker

dtpicker組件適用於彈出日期選擇器

快速體驗

a、通過new mui.DtPicker()初始化DtPicker組件

       var dtPicker = new mui.DtPicker(options);

b、顯示picker

        dtPicker.show( SelectedItemsCallback )

實例

 

[html]  view plain  copy
 
  1. var dtPicker = new mui.DtPicker();  
  2.     dtPicker.show(function (selectItems) {  
  3.    console.log(selectItems.y);//{text: "2016",value: 2016}  
  4.    console.log(selectItems.m);//{text: "05",value: "05"}  
  5.     })  


 

API詳解

a、new DtPicker({options}})

  1）、參數:type：Type: JSON，設置日歷初始視圖模式。支持的值:

'datetime'：完整日期視圖(年月日時分)；'date'：年視圖(年月日)'time'：時間視圖(時分)；'month'：月視圖(年月)；'hour'：時視圖(年月日時)；*暫不支持指定其他視圖；如有特殊需求可在dtpicker.js中修改getSelected()方法中selected對象值

  2）.參數:customData：Type: JSON，設置時間/日期別名設置格式:

 

[javascript]  view plain  copy
 
  1. "customData":{  
  2.    "date":[  
  3.       {value:"",text:""}  
  4.    ]  
  5. }  

 

示例:

 

[html]  view plain  copy
 
  1. var dtpicker = new mui.DtPicker({  
  2.   "type": "time",  
  3.     "customData": {  
  4.       "h": [  
  5.        {  
  6.           value: "am",  
  7.           text: "上午"  
  8.        }, {  
  9.           value: "pm",  
  10.           text: "下午"  
  11.        },  
  12.     ]  
  13.  }  
  14. })  
  15. dtpicker.show(function(e) {  
  16. console.log(e);  
  17. })  

 

支持的值:'y'：可設置年別名；'m'：可設置月別名；'d'：可設置日別名；'h'：可設置時別名；'i'：可設置分別名；*customData值生效的前提需要有指定的日期視圖,如設置'y',需要在視圖使用'年'視圖

  3）.參數:labels：Type: Array，設置默認標簽區域提示語，可設置["年", "月", "日", "時", "分"]這五個字段,可以根據視圖模式選擇設置個別標簽,也可以設置所有標簽,dtpicker顯示的時候只會根據當前視圖顯示設置項,*建議不要設置空字符串,會影響美觀哦

  4）.參數:beginDate：Type: Date，設置可選擇日期最小范圍，可單獨設置最小年范圍, 如: beginYear:2015, 其他日期支持Date格式,如:new Date(2016,5)可指定最小月份6月。

  5）.參數:endDate：Type: Date，設置可選擇日期最大范圍，可單獨設置最大年范圍, 如: endYear:2017, 其他日期支持Date格式,如:new Date(2016,10)可指定最大月份11月。

完整示例:

 

[html]  view plain  copy
 
  1. var dtpicker = new mui.DtPicker({  
  2.     type: "datetime",//設置日歷初始視圖模式  
  3.     beginDate: new Date(2015, 04, 25),//設置開始日期  
  4.     endDate: new Date(2016, 04, 25),//設置結束日期  
  5.     labels: ['Year', 'Mon', 'Day', 'Hour', 'min'],//設置默認標簽區域提示語  
  6.     customData: {  
  7.         h: [{  
  8.             value: 'AM',  
  9.             text: 'AM'  
  10.         }, {  
  11.             value: 'PM',  
  12.             text: 'PM'  
  13.         }]  
  14.     }//時間/日期別名  
  15. })  
  16. dtpicker.show(function(e) {  
  17.     console.log(e);  
  18. })  


 

b、getSelectedItems()

   返回值Date：Type: Date，獲取選中的項

       如: var iTems = dtPicker.getSelectedItems()

   返回值:

   * iTems.value 拼合后的 value

   * iTems.text 拼合后的 text

   * iTems.y 年，可以通過 rs.y.vaue 和 rs.y.text 獲取值和文本

   * iTems.m 月，用法同年

   * iTems.d 日，用法同年

   * iTems.h 時，用法同年

   * iTems.i 分（minutes 的第二個字母），用法同年

c、show( getSelectedItems )

   返回值:[data]：Type: Array，獲取選中的項（數組）

   如:

   dtpicker.show(function(items) {

   * items.value 拼合后的 value

   * items.text 拼合后的 text

   * items.y 年，可以通過 rs.y.vaue 和 rs.y.text 獲取值和文本

   * items.m 月，用法同年

   * items.d 日，用法同年

   * items.h 時，用法同年

   * items.i 分（minutes 的第二個字母），用法同年

console.log(items);

   })

   *return false; 可以阻止選擇框的關閉

e、hide()

    隱藏dtPicker

    如:dtPicker.hide()

f、dispose()

    釋放組件資源(釋放后將將不能再操作組件)

     如:dtPicker.dispose()

     * 通常情況下，不需要釋放組件資源，初始化之后，可以一直使用。

     * 當內容較多，如不釋放組件資源，在某些設備上可能會卡頓。

     * 所以每次用完便立即調用 dispose() 進行釋放,下次用時再創建新實例。

    picker組件會觸發webview硬件加速,在部分手機上可以能出現卡頓或變形的情況此時需要開啟硬件加速,硬件加速請參考硬件加速章節

代碼塊激活字符:  mpoppicker mdtpicker

 

2、progressbar（滾動條）

   有准確值的進度條，有准確值的進度條會顯示當前進度正處於整體進度的占比位置，用戶可以更直觀的預期完成時間；

   使用進度條控件，需要一個進度條控件容器，mui會自動識別該容器下是否有進度條控件，若沒有，則自動創建。

（1）、進度條控件DOM結構：

 

[html]  view plain  copy
 
  1. <div id="demo1" class="mui-progressbar">  
  2. <span></span>  
  3. </div>  

 

（2）、初始化:

     mui(Container).progressbar({progress:20}).show();

例如:

     mui("#demo1").progressbar({progress:20}).show();

（3）、progressbar初始化邏輯：

  檢查當前容器(container控件)自身是否包含.mui-progressbar類：當前容器包含.mui-progressbar類，則以當前容器為目標控件，直接顯示進度；否則，檢查當前容器的直接孩子節點是否包含.mui-progressbar類，若存在，則以遍歷到的第一個含有.mui-progressbar類的孩子節點為目標控件，顯示進度；若當前容器的直接孩子節點，均不含.mui-progressbar類,則自動創建進度條控件；

（4）、更改顯示進度條:

       mui(container).progressbar().setProgress(50);

（5）、關閉進度條:

       mui(container).progressbar().hide();

  備注：關閉進度條一般用於動態創建（DOM中預先未定義）的進度條，調用hide方法后，會直接刪掉對應的DOM節點；若已提前創建好DOM節點的進度條，調用hide方法無效；

（6）、無限循環進度條:

  若無法准確提供當前進度，可以提供無限循環進度條（無限循環進度條類似於waiting等待框,無限循環進度條和准確值的進度條的用法基本相同，有如下差異：進度條控件DOM結構（多了.mui-progressbar-infinite）：

<div id="demo1" class="mui-progressbar mui-progressbar-infinite">

<span></span>

</div>

（7）、初始化

         mui("#demo1").progressbar().show();

  注意：無限循環進度條不顯示具體進度，因此初始化時，不能傳入progress參數；mui框架也是根據progressbar構造方法中是否包含progress參數來區分當前進度條為有准確值的進度條還是無限循環進度條；同樣因為不顯示具體進度的原因，無限循環進度條調用setProgress()方法無效。

（8）、關閉進度條

          mui("#demo1").progressbar().hide();

（9）、頁面頂部進度條

  頁面頂部進度條類似瀏覽器進度條，固定顯示在頁面頂部（標題導航控件下方）； 因此，若當前頁面使用父子雙webview模式，子頁面沒有標題導航組件，則需通過自定義css的方式，重定義頂部進度條的位置，示例代碼如下：

body>.mui-progressbar{

top:0

}

  使用頁面頂部進度條時，無需編寫DOM結構，使用如下代碼即可自動創建（頂部無限循環進度條同理）：

mui('body').progressbar({

progress: 20

}).show();

代碼塊激活字符: mprogressbar

 

3、radio（單選框）

radio用於單選的情況

DOM結構

 

[html]  view plain  copy
 
  1. <div class="mui-input-row mui-radio">  
  2. <label>radio</label>  
  3. <input name="radio1" type="radio">  
  4. </div>  

 

默認radio在右側顯示，若希望在左側顯示，只需增加.mui-left類即可，如下：

 

[html]  view plain  copy
 
  1. <div class="mui-input-row mui-radio mui-left">  
  2. <label>radio</label>  
  3. <input name="radio1" type="radio">  
  4. </div>  

 

若要禁用radio，只需在radio上增加disabled屬性即可；

   mui基於列表控件，提供了列表式單選實現；在列表根節點上增加.mui-table-view-radio類即可，若要默認選中某項，只需要在對應li節點上增加.mui-selected類即可，dom結構如下：

 

[html]  view plain  copy
 
  1. <ul class="mui-table-view mui-table-view-radio">  
  2. <li class="mui-table-view-cell">  
  3. <a class="mui-navigate-right">Item 1</a>  
  4. </li>  
  5. <li class="mui-table-view-cell mui-selected">  
  6. <a class="mui-navigate-right">Item 2</a>  
  7. </li>  
  8. <li class="mui-table-view-cell">  
  9. <a class="mui-navigate-right">Item 3</a>  
  10. </li>  
  11. </ul>  

 

  列表式單選在切換選中項時會觸發selected事件，在事件參數（e.detail.el）中可以獲得當前選中的dom節點，如下代碼打印當前選中項的innerHTML：

 

[html]  view plain  copy
 
  1. var list = document.querySelector('.mui-table-view.mui-table-view-radio');  
  2. list.addEventListener('selected',function(e){  
  3. console.log("當前選中的為："+e.detail.el.innerText);  
  4. });  

 

代碼塊激活字符:  mradio

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
  6.     <title></title>  
  7.     <script src="js/mui.min.js"></script>  
  8.     <link href="css/mui.min.css" rel="stylesheet"/>  
  9.     <script type="text/javascript" charset="utf-8">  
  10.         mui.init();  
  11.     </script>  
  12. </head>  
  13. <body>  
  14. <header class="mui-bar mui-bar-nav">  
  15.     <h1 class="mui-title">radio（單選框）</h1>  
  16. </header>  
  17. <div class="mui-content mui-active">  
  18. <div class="mui-input-row mui-radio ">  
  19.     <label>Radio</label>  
  20.     <input name="radio" type="radio" >  
  21. </div>  
  22. <div class="mui-input-row mui-radio mui-left">  
  23.     <label>Radio</label>  
  24.     <input name="radio" type="radio" >  
  25. </div>  
  26. <div class="mui-input-row mui-radio mui-disabled">  
  27.     <label>Radio</label>  
  28.     <input name="radio" type="radio" disabled="disabled">  
  29. </div>  
  30. <ul class="mui-table-view mui-table-view-radio">  
  31.     <li class="mui-table-view-cell">  
  32.         <a class="mui-navigate-right">Item 1</a>  
  33.     </li>  
  34.     <li class="mui-table-view-cell mui-selected">  
  35.         <a class="mui-navigate-right">Item 2</a>  
  36.     </li>  
  37.     <li class="mui-table-view-cell">  
  38.         <a class="mui-navigate-right">Item 3</a>  
  39.     </li>  
  40. </ul>  
  41. </div>  
  42. </body>  
  43. </html>  

 

 

 

4、scroll(區域滾動)

  在App開發中，div區域滾動的需求是普遍存在的，但系統默認實現又有如下問題：

      Android平台4.0以下不支持div滾動

      Android平台4.0以上支持div滾動，但不顯示滾動條

      彈出層的div滾動在iOS平台存在事件透傳的問題

 因此，mui額外提供了區域滾動組件，使用時需要遵循如下DOM結構

 

[html]  view plain  copy
 
  1. <div class="mui-scroll-wrapper">  
  2. <div class="mui-scroll">  
  3. <!--這里放置真實顯示的DOM內容-->  
  4. </div>  
  5. </div>  

 

   區域滾動組件默認為absolute定位，全屏顯示；在實際使用過程中，需要手動設置滾動區域的位置（top和height）。若使用區域滾動組件，需手動初始化scroll控件

*常用配置項:

scroll.options

options = {

 scrollY: true, //是否豎向滾動

 scrollX: false, //是否橫向滾動

 startX: 0, //初始化時滾動至x

 startY: 0, //初始化時滾動至y

 indicators: true, //是否顯示滾動條

 deceleration:0.0006 //阻尼系數,系數越小滑動越靈敏

 bounce: true, //是否啟用回彈

}

示例：初始化scroll控件：

 

[javascript]  view plain  copy
 
  1. mui('.mui-scroll-wrapper').scroll({  
  2. deceleration: 0.0005 //flick 減速系數，系數越大，滾動速度越慢，滾動距離越小，默認值0.0006  
  3. });  

 

mui中iOS平台的下拉刷新（Android平台的下拉刷新使用的是雙webview+原生滾動方案）、popover、可拖動式選項卡均使用了scroll組件。 為方便大家使用，mui還額外為scroll插件封裝了部分方法。

（1）、滾動到特定位置

scrollTo( xpos , ypos [, duration] )

xpos：Type: Integer，要在窗口文檔顯示區左上角顯示的文檔的 x 坐標

ypos：Type: Integer，要在窗口文檔顯示區左上角顯示的文檔的 y 坐標

duration：Type: Integer，滾動時間周期，單位是毫秒

示例：快速回滾到該區域頂部，代碼如下：

mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滾動到頂

（2）、滾動到底部位置

   滾動到頂部的代碼比較容易實現,坐標值設為0、0即可；但滾動到底部，需要計算該區域的實際高度，因此mui封裝了scrollToBottom方法。

scrollToBottom(duration)

duration：Type: Integer，滾動時間周期，單位是毫秒

（3）、橫向滾動

   橫向滾動只需在scroll組件基礎上添加mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted這三個class即可.(給子元素添加mui-control-item可加大文字間距增強體驗

如:)

 

[html]  view plain  copy
 
  1. <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
  2.     <div class="mui-scroll">  
  3.         <a class="mui-control-item mui-active">  
  4.             推薦  
  5.         </a>  
  6.         <a class="mui-control-item">  
  7.             熱點  
  8.         </a>  
  9.         <a class="mui-control-item">  
  10.             北京  
  11.         </a>  
  12.         <a class="mui-control-item">  
  13.             社會  
  14.         </a>  
  15.         <a class="mui-control-item">  
  16.             娛樂  
  17.         </a>  
  18.         <a class="mui-control-item">  
  19.             科技  
  20.         </a>  
  21.     </div>  
  22. </div>  


 

代碼塊激活字符:  mscrollmscrollsegmented

 

5、slide（輪播組件）

  輪播組件是mui提供的一個核心組件，在該核心組件基礎上，衍生出了圖片輪播、可拖動式圖文表格、可拖動式選項卡、左右滑動9宮格等組件，這些組件有較多共同點。首先，Dom構造基本相同，如下：

 

[html]  view plain  copy
 
  1. <div class="mui-slider">  
  2.   <div class="mui-slider-group">  
  3.     <!--第一個內容區容器-->  
  4.     <div class="mui-slider-item">  
  5.       <!-- 具體內容 -->  
  6.     </div>  
  7.     <!--第二個內容區-->  
  8.     <div class="mui-slider-item">  
  9.       <!-- 具體內容 -->  
  10.     </div>  
  11.   </div>  
  12. </div>  


 

  當拖動切換顯示內容時，會觸發slide事件，通過該事件的detail.slideNumber參數可以獲得當前顯示項的索引（第一項索引為0，第二項為1，以此類推），利用該事件，可在顯示內容切換時，動態處理一些業務邏輯。

  如下為一個可拖動式選項卡示例，為提高頁面加載速度，頁面加載時，僅顯示第一個選項卡的內容，第二、第三選項卡內容為空。當切換到第二、第三個選項卡時，再動態獲取相應內容進行顯示：

 

[html]  view plain  copy
 
  1. var item2Show = false,item3Show = false;//子選項卡是否顯示標志  
  2. document.querySelector('.mui-slider').addEventListener('slide', function(event) {  
  3.   if (event.detail.slideNumber === 1&&!item2Show) {  
  4.     //切換到第二個選項卡  
  5.     //根據具體業務，動態獲得第二個選項卡內容；  
  6.     var content = ....  
  7.     //顯示內容  
  8.     document.getElementById("item2").innerHTML = content;  
  9.     //改變標志位，下次直接顯示  
  10.     item2Show = true;  
  11.   } else if (event.detail.slideNumber === 2&&!item3Show) {  
  12.     //切換到第三個選項卡  
  13.     //根據具體業務，動態獲得第三個選項卡內容；  
  14.     var content = ....  
  15.     //顯示內容  
  16.     document.getElementById("item3").innerHTML = content;  
  17.     //改變標志位，下次直接顯示  
  18.     item3Show = true;  
  19.   }  
  20. });  
   圖片輪播、可拖動式圖文表格等均可按照同樣方式監聽內容變化，比如我們可以在圖片輪播界面顯示當前正在看的是第幾張圖片：

 

 

[javascript]  view plain  copy
 
  1. document.querySelector('.mui-slider').addEventListener('slide', function(event) {  
  2.   //注意slideNumber是從0開始的；  
  3.   document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"張圖片";  
  4. });  

 

代碼塊激活字符: mslider


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Tkinter單選框及滾動條 Android學習使用基本界面組件（下拉框，單選框，復選框，數字轉輪，滾動條） CSS滾動條選擇器——實現個性化滾動條 Vue 單選框與單選框組 組件 Delphi 滾動條組件 TScrollBar 介紹 vue iscroll5滾動條組件 Laya的List組件+滾動條 mui禁止滾動條和禁止滾動 基於vue的滾動條組件之----element隱藏組件滾動條scrollbar使用 MUI開發APP，scroll組件，運用到區域滾動
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM