一、MUI框架介绍：MUI框架是一个专门用于手机端app应用程序开发的前端框架，mui框架有效的解决了原生h5的相关问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。
官网：www.dcloud.io 提供了很多且详细的应用组件的模板，能够很好的帮助初学者较快掌握MUI框架的相关知识，更好更快的感受到原生开发的魅力。
二、相关组件介绍——picker选择器
mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现(1)准备工作：导入相关js文件和css文件
poppicker组件依赖mui.picker.js/.css
mui.poppicker.js/.css请务必在mui.js/css后中引用,也可统一引用 压缩版本:mui.picker.min.js
1、popPicker
适用于弹出单级或多级选择器
创建poppicker选择器，涵括3个步骤：
- 初始化popPicker组件
var picker = new mui.PopPicker(); //初始化popPicker组件- 给picker对象添加数据
picker.setData([{value:'zz',text:'智子'}]); //给picker对象添加数据注意：setData() 支持数据格式为: 数组
【只能将数组赋给picker】
- 显示picker
picker.show( SelectedItemsCallback ) //显示picker单级选择器实例：
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
})若要显示多级选择器，则在setData(）时添加children元素
示例：
picker.setData([{
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "东城区"
}] //添加子元素
}, {
value: '120000',
text: '天津市',
children: [{
value: "120101",
text: "和平区"
}, {
value: "120102",
text: "河东区"
}, {
value: "120104",
text: "南开区"
}
]
}])设置默认值：
PopPicker 创建实例并填充数据后，可以设定每个层级的选中项，因为 PopPicker 是支持多层级联的，所以，可通过 instance.pickers[index] 拿到指定层级的实例，然后通过setSelectedIndex()和setSelectedValue()两个方法,设定指定层级的选中项
picker.pickers[i] 指定默认值的层级
【方法一】：picker.pickers[i].setSelectedValue(value,duration,callback);
picker.pickers[0].setSelectedValue(‘fourth’, 2000);//示例
{
参数value：指定列表选中项的value值（‘value’)
参数duration：过渡效果持续时间(ms)
参数callback：function(){} ==>回调函数 设置成功回调
}
【方法二】：picker.pickers[i].setSelectedIndex(index,duration,callback);
{
参数index：指定列表选中项的index索引值（默认从0开始）
参数duration：过渡效果持续时间(ms)
参数callback：function(){} ==>回调函数 设置成功回调
}
**若要设置多级默认值可依次获取每一层级Picker对象并设置默认值（逐级进行设置）
官方API详解：
1）new mui.PopPicker({PopPicker.options})
具体：
（1） layer ：支持数据类型：整形 提供picker显示的列数
（2) button : 支持数据类型：Array picker显示按钮
如:new mui.PopPicker({buttons:[‘cancle’,‘ok’]})
2）setData([data])
支持数据类型：Array
填充picker的内容
如：picker.setData([{value:‘zz’,text:‘智子’}]) //data格式
获取选中项的方法
方法一：getSelectedItems 返回值[data] type:Array
获取选中的项 ,返回值的类型为数组
如:picker.getSelectedItems()
方法二：show(getSelectedItems) 返回值[data] type:Array
获取选中的项 ,返回值的类型为数组
如：picker.show(function(getSelectedItems){
console.log(getSelectedItems) ；
return false;//可以阻止选择框关闭
})
隐藏picker选择框
方法：hide()
如:picker.hide()
释放组件资源
方法：dispose()
如:picker.dispose()
注意：释放后将将不能再操作组件，下次用时，需要重新创建[调用 dispose() 进行释放,下次用时再创建新实例]
【补充】：
在实际开发中，picker的选择项都不是写死的，通常需要后端传递数据到达前端，然后动态设置picker的选择项
方法：
people.push({
text: re[i]['name']//text时最终展示在选择项上的对象
})//把值推进数组push方法：可以把值推进数组，每次放在数组的末尾
（这里只设置了一个类型（text），实质可以自定义推进更多的类型）
jquery中push()的用法(数组添加元素)
取值：selectItems[0].text （ 取出选中项的text值）
动态设置时，将后端传回来的值以循环的方式，按push方法存入数组，然后setdata()时，将整个数组传入，即可。
for (var i = 0; i < re.length+1; i++) {
if(i==re.length)
{
people.push({
text:"全部成员"
})//把值推进数组
}
else
{
people.push({
text: re[i]['name']
})//把值推进数组
}
}
var picker = new mui.PopPicker();//实例一个选择器
picker.setData(people);//将值以数组的形式直接传入
