MUI组件四：选择器、滚动条、单选框、区域滚动和轮播组件

时间：2024-03-04 10:18:00

 

目录(?)[+]

 

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

相关文章