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 )
实例
- 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
- })
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 )
实例
- 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"}
- })
API详解
a、new DtPicker({options}})
1)、参数:type:Type: JSON,设置日历初始视图模式。支持的值:
'datetime':完整日期视图(年月日时分);'date':年视图(年月日)'time':时间视图(时分);'month':月视图(年月);'hour':时视图(年月日时);*暂不支持指定其他视图;如有特殊需求可在dtpicker.js中修改getSelected()方法中selected对象值
2).参数:customData:Type: JSON,设置时间/日期别名设置格式:
- "customData":{
- "date":[
- {value:"",text:""}
- ]
- }
示例:
- var dtpicker = new mui.DtPicker({
- "type": "time",
- "customData": {
- "h": [
- {
- value: "am",
- text: "上午"
- }, {
- value: "pm",
- text: "下午"
- },
- ]
- }
- })
- dtpicker.show(function(e) {
- console.log(e);
- })
支持的值:'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月。
完整示例:
- var dtpicker = new mui.DtPicker({
- type: "datetime",//设置日历初始视图模式
- beginDate: new Date(2015, 04, 25),//设置开始日期
- endDate: new Date(2016, 04, 25),//设置结束日期
- labels: ['Year', 'Mon', 'Day', 'Hour', 'min'],//设置默认标签区域提示语
- customData: {
- h: [{
- value: 'AM',
- text: 'AM'
- }, {
- value: 'PM',
- text: 'PM'
- }]
- }//时间/日期别名
- })
- dtpicker.show(function(e) {
- console.log(e);
- })
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结构:
- <div id="demo1" class="mui-progressbar">
- <span></span>
- </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结构
- <div class="mui-input-row mui-radio">
- <label>radio</label>
- <input name="radio1" type="radio">
- </div>
默认radio在右侧显示,若希望在左侧显示,只需增加.mui-left类即可,如下:
- <div class="mui-input-row mui-radio mui-left">
- <label>radio</label>
- <input name="radio1" type="radio">
- </div>
若要禁用radio,只需在radio上增加disabled属性即可;
mui基于列表控件,提供了列表式单选实现;在列表根节点上增加.mui-table-view-radio类即可,若要默认选中某项,只需要在对应li节点上增加.mui-selected类即可,dom结构如下:
- <ul class="mui-table-view mui-table-view-radio">
- <li class="mui-table-view-cell">
- <a class="mui-navigate-right">Item 1</a>
- </li>
- <li class="mui-table-view-cell mui-selected">
- <a class="mui-navigate-right">Item 2</a>
- </li>
- <li class="mui-table-view-cell">
- <a class="mui-navigate-right">Item 3</a>
- </li>
- </ul>
列表式单选在切换选中项时会触发selected事件,在事件参数(e.detail.el)中可以获得当前选中的dom节点,如下代码打印当前选中项的innerHTML:
- var list = document.querySelector('.mui-table-view.mui-table-view-radio');
- list.addEventListener('selected',function(e){
- console.log("当前选中的为:"+e.detail.el.innerText);
- });
代码块激活字符: mradio
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <title></title>
- <script src="js/mui.min.js"></script>
- <link href="css/mui.min.css" rel="stylesheet"/>
- <script type="text/javascript" charset="utf-8">
- mui.init();
- </script>
- </head>
- <body>
- <header class="mui-bar mui-bar-nav">
- <h1 class="mui-title">radio(单选框)</h1>
- </header>
- <div class="mui-content mui-active">
- <div class="mui-input-row mui-radio ">
- <label>Radio</label>
- <input name="radio" type="radio" >
- </div>
- <div class="mui-input-row mui-radio mui-left">
- <label>Radio</label>
- <input name="radio" type="radio" >
- </div>
- <div class="mui-input-row mui-radio mui-disabled">
- <label>Radio</label>
- <input name="radio" type="radio" disabled="disabled">
- </div>
- <ul class="mui-table-view mui-table-view-radio">
- <li class="mui-table-view-cell">
- <a class="mui-navigate-right">Item 1</a>
- </li>
- <li class="mui-table-view-cell mui-selected">
- <a class="mui-navigate-right">Item 2</a>
- </li>
- <li class="mui-table-view-cell">
- <a class="mui-navigate-right">Item 3</a>
- </li>
- </ul>
- </div>
- </body>
- </html>
4、scroll(区域滚动)
在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题:
Android平台4.0以下不支持div滚动
Android平台4.0以上支持div滚动,但不显示滚动条
弹出层的div滚动在iOS平台存在事件透传的问题
因此,mui额外提供了区域滚动组件,使用时需要遵循如下DOM结构
- <div class="mui-scroll-wrapper">
- <div class="mui-scroll">
- <!--这里放置真实显示的DOM内容-->
- </div>
- </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控件:
- mui('.mui-scroll-wrapper').scroll({
- deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
- });
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可加大文字间距增强体验
如:)
- <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
- <div class="mui-scroll">
- <a class="mui-control-item mui-active">
- 推荐
- </a>
- <a class="mui-control-item">
- 热点
- </a>
- <a class="mui-control-item">
- 北京
- </a>
- <a class="mui-control-item">
- 社会
- </a>
- <a class="mui-control-item">
- 娱乐
- </a>
- <a class="mui-control-item">
- 科技
- </a>
- </div>
- </div>
代码块激活字符: mscrollmscrollsegmented
5、slide(轮播组件)
轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件,这些组件有较多共同点。首先,Dom构造基本相同,如下:
- <div class="mui-slider">
- <div class="mui-slider-group">
- <!--第一个内容区容器-->
- <div class="mui-slider-item">
- <!-- 具体内容 -->
- </div>
- <!--第二个内容区-->
- <div class="mui-slider-item">
- <!-- 具体内容 -->
- </div>
- </div>
- </div>
当拖动切换显示内容时,会触发slide事件,通过该事件的detail.slideNumber参数可以获得当前显示项的索引(第一项索引为0,第二项为1,以此类推),利用该事件,可在显示内容切换时,动态处理一些业务逻辑。
如下为一个可拖动式选项卡示例,为提高页面加载速度,页面加载时,仅显示第一个选项卡的内容,第二、第三选项卡内容为空。当切换到第二、第三个选项卡时,再动态获取相应内容进行显示:
- var item2Show = false,item3Show = false;//子选项卡是否显示标志
- document.querySelector('.mui-slider').addEventListener('slide', function(event) {
- if (event.detail.slideNumber === 1&&!item2Show) {
- //切换到第二个选项卡
- //根据具体业务,动态获得第二个选项卡内容;
- var content = ....
- //显示内容
- document.getElementById("item2").innerHTML = content;
- //改变标志位,下次直接显示
- item2Show = true;
- } else if (event.detail.slideNumber === 2&&!item3Show) {
- //切换到第三个选项卡
- //根据具体业务,动态获得第三个选项卡内容;
- var content = ....
- //显示内容
- document.getElementById("item3").innerHTML = content;
- //改变标志位,下次直接显示
- item3Show = true;
- }
- });
图片轮播、可拖动式图文表格等均可按照同样方式监听内容变化,比如我们可以在图片轮播界面显示当前正在看的是第几张图片:
- document.querySelector('.mui-slider').addEventListener('slide', function(event) {
- //注意slideNumber是从0开始的;
- document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片";
- });
代码块激活字符: mslider
MUI组件四:选择器、滚动条、单选框、区域滚动和轮播组件的更多相关文章
-
Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
-
mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
-
React-Native之轮播组件looped-carousel的介绍与使用
React-Native之轮播组件looped-carousel的介绍与使用 一,关于react-native轮播组件的介绍与对比 1,react-native-swiper在动态使用网页图片,多张图 ...
-
一分钟搞定AlloyTouch图片轮播组件
轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹. 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至 ...
-
Omi-touch实战 移动端图片轮播组件的封装
pc端的轮播,移动端的轮播都很常见.一年前,我还为手机端没有左滑,右滑事件从而封装了一个swipe库,可以自定义超过多少滑动时间就不触发,也可以设置滑动多少距离才触发,这一个功能的代码就达到400多行 ...
-
鸿蒙开源第三方件组件——轮播组件Banner
目录: 1.功能展示 2.Sample解析 3.Library解析 4.<鸿蒙开源第三方组件>系列文章合集 前言 基于安卓平台的轮播组件Banner(https://github.com/ ...
-
基于移动端Reactive Native轮播组件的应用与开发详解
总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reactive native是什么 由facebo ...
-
移动端Reactive Native轮播组件
移动端Reactive Native轮播组件 总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reac ...
-
bootstrap轮播组件,大屏幕图片居中效果
在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...
随机推荐
-
Lesson 8 The best and the worst
Text Joe Sanders has the most beautiful garden in our town. Nearly everbody enters for 'The Nicest G ...
-
js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
-
实验三——for语句及分支结构else-if
1.本节课学习到的知识点: (1)for语句是循环语句,它可以实现c语句的重复执行 (2)for语句中的3个表达式的执行顺序和书写顺序不同 (3)遇到复合语句时要用大括号将几句话括起来,复合语句在语法 ...
-
python数字图像处理(17):边缘与轮廓
在前面的python数字图像处理(10):图像简单滤波 中,我们已经讲解了很多算子用来检测边缘,其中用得最多的canny算子边缘检测. 本篇我们讲解一些其它方法来检测轮廓. 1.查找轮廓(find_c ...
-
MATLAB学习笔记(五)&mdash;&mdash;MATLAB绘图
(一)二维数据曲线图 一.绘制单根二维曲线 1.基本调用格式 plot(x,y) (1)x,y为长度相同的向量,分别用于储存x坐标和y坐标数据 (2)用于绘制以x,y为横,纵坐标的二维曲线. (3)举 ...
-
利用if,else判断输入的是不是一个正整数
static void Main(string[] args) { while (true) { Console.Writ ...
-
type和create type
type和create type 异同点: create type 可在库中生成一个长期有效的自定义类型对象,而type作用域仅限于语句块中: 两者都可以自定义数据类型: 各种ty ...
-
Delphi的WebBrowser改造,对网页中Alter等对话框的改造方法(通过COM来改造)
刚有一段时间没做博客了,今天刚好有人问了这个问题,而自己以前也弄过,于是这里有了一篇新的博文. 关于改造WebBrowser控件的一些技巧,大家可以参考MSDN或者蒋晟写的一个东西,里面有讲的很详细的 ...
-
Maven的pom.xml文件结构之基本配置packaging和多模块聚合结构(微服务)
1. packaging packaging给出了项目的打包类型,即作为项目的发布形式,其可能的类型.在Maven 3中,其可用的打包类型如下: jar,默认类型 war ejb ear rar pa ...
-
微服务SpringCloud容器化案例
前言 当我们在使用微服务的时候,那么有一个问题一定会困扰我们,那就是项目的测试和部署.因为在单体应用下,部署项目很简单,直接打包启动就可以了,而对于微服务来说,因为有各个组件的存在所以让测试和部署都变 ...