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

目录(?)[+]

 

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 )

实例

  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() 进行释放,下次用时再创建新实例。

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

(2)、dtpicker

dtpicker组件适用于弹出日期选择器

快速体验

a、通过new mui.DtPicker()初始化DtPicker组件

var dtPicker = new mui.DtPicker(options);

b、显示picker

dtPicker.show( SelectedItemsCallback )

实例

  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,设置时间/日期别名设置格式:

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

示例:

  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月。

完整示例:

  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

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

2、progressbar(滚动条)

有准确值的进度条,有准确值的进度条会显示当前进度正处于整体进度的占比位置,用户可以更直观的预期完成时间;

使用进度条控件,需要一个进度条控件容器,mui会自动识别该容器下是否有进度条控件,若没有,则自动创建。

(1)、进度条控件DOM结构:

  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

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

3、radio(单选框)

radio用于单选的情况

DOM结构

  1. <div class="mui-input-row mui-radio">
  2. <label>radio</label>
  3. <input name="radio1" type="radio">
  4. </div>

默认radio在右侧显示,若希望在左侧显示,只需增加.mui-left类即可,如下:

  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结构如下:

  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:

  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

  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>

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

4、scroll(区域滚动)

在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题:

Android平台4.0以下不支持div滚动

Android平台4.0以上支持div滚动,但不显示滚动条

弹出层的div滚动在iOS平台存在事件透传的问题

因此,mui额外提供了区域滚动组件,使用时需要遵循如下DOM结构

  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控件:

  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可加大文字间距增强体验

如:)

  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构造基本相同,如下:

  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,以此类推),利用该事件,可在显示内容切换时,动态处理一些业务逻辑。

如下为一个可拖动式选项卡示例,为提高页面加载速度,页面加载时,仅显示第一个选项卡的内容,第二、第三选项卡内容为空。当切换到第二、第三个选项卡时,再动态获取相应内容进行显示:

  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. });

图片轮播、可拖动式图文表格等均可按照同样方式监听内容变化,比如我们可以在图片轮播界面显示当前正在看的是第几张图片:

  1. document.querySelector('.mui-slider').addEventListener('slide', function(event) {
  2. //注意slideNumber是从0开始的;
  3. document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片";
  4. });

代码块激活字符: mslider

上一篇:如何设置 ssh secure shell 支持中文


下一篇:鸿蒙开源第三方件组件——轮播组件Banner