MUI-城市联动，日期联动-picker(选择器)学习笔记（附最

作者: woow_wu7 | 来源:发表于2017-06-24 23:12 被阅读438次

MUI-城市联动，日期联动-picker(选择器)学习笔记（附最
小程序开发笔记《三》自定义省市二级联动
联动picker组件
小程序picker组件省市二级联动
几行代码实现ListView的多级联动
小程序省市区三级联动
van-picker在wepy多级联动
小程序picker多列滚动使用注意事项
微信小程序-自定义picker选择器
Swift - 多级城市联动选择器

知识点：

城市篇

addEventListener(event,function,useCapture) ：方法用于向指定元素添加事件。

addEventListener(事件名，事件需要执行的函数，布尔值)
支持：所有HTML DOM事件 
（1）tap和click的区别：
        两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。
        (tap有击穿现象，现在性能过剩，用click可行)
        singleTap和doubleTap 分别代表单次点击和双次点击。

*poppicker组件依赖mui.picker.js/.css mui.poppicker.js/.css请务必在mui.js/css后中引用,也可统一引用压缩版本:mui.picker.min.js

这里需要引入 mui.picker.js   mui.picker.css   mui.poppicker.js   mui.poppicker.css
四个文件，或者这四个文件的min文件

通过new mui.PopPicker() - 初始化popPicker组件

var picker = new  mui.PopPicker({   //这里注意大小写PopPicker
layer: 3 ,  //表示三列，即三级菜单或者联动
buttons:['取消', '确定']     //显示按钮
})

通过picker.setData - 给picker对象添加数据

setData() 支持数据格式为: 数组 
 picker.setData([{value:'zz',text:'智子'}]);   //一列样式
 picker.setData([{     //二列样式
        value: '110000',
        text: '北京市',
        children: [{
                value: "110101",
                text: "东城区"
        }]
    }])
 picker.setData([{     //三列样式
        value: '110000',
        text: '北京市',
        children: [{
                value: "110101",
                text: "东城区",
                children:[{
                      value: "111000",
                      text: "中关村" 
                      }]
        }]
    }])

通过picker.show() - 显示picker
通过picker.show( function(getSelectedItems) { } ) 获取选中的项（数组）

PopPicker 创建实例并填充数据后，可以设定每个层级的选中项，因为 PopPicker 
是支持多层级联的，所以:
(1)可通过 instance.pickers[index] 拿到指定层级的实例，
(2)然后通过setSelectedIndex()和setSelectedValue()两个方法,设定指定层级的选中项
var picker = new mui.PopPicker();
picker.setData([{
    value: "first",
    text: "第一项"
}, {
    value: "second",
    text: "第一项"
}, {
    value: "third",
    text: "第三项"
}, {
    value: "fourth",
    text: "第四项"
}, {
    value: "fifth",
    text: "第五项"
}])
//picker.pickers[0].setSelectedIndex(4, 2000);     //4和value:''fourth''的区别 
picker.pickers[0].setSelectedValue('fourth', 2000);  
//这里表示默认选中第一列的第四项，时间是2000毫秒
picker.show(function(SelectedItem) {    //获取选中的项（数组）注意大小写
    console.log(SelectedItem);
})

.mui-picker{}可以设置选择器css样式；

.mui-picker{
    background-color: #fff;   //设置选择器背景为白色
   }

日期篇

通过new mui.DtPicker() - 初始化DtPicker组件 //城市是new mui.PopPicker()
通过type - 设置日历初始视图模式
通过labels - 设置默认标签区域提示语
通过beginDate和endDate设置开始，结束日期
通过customData -设置时间/日期别名
通过dtPicker.show( SelectedItemsCallback ) - 显示dtPicker

var dtpicker = new mui.DtPicker({    //注意大小写
    "type": "time",  // 时间格式(时分)
                     // "type":"datetime"(年月日时分)
                     // "type":"date"(年月日)
                     // "type":"hour"(年月日时)
    "labels": ['年', 'Mon', 'Day', 'Hour', 'min'],//设置默认标签区域提示语 
    "beginDate": new Date(2015, 04, 25),//设置开始日期 
    "endDate": new Date(2016, 04, 25),//设置结束日期 
    "customData": {
        "h": [      //时
            { value: "am", text: "上午" },
            { value: "pm", text: "下午" },
        ],
        "i":[
           {value: "10", text: "10分"},
           {value: "20", text: "20分"},
        ]
    } 
})
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.d);  //得到选中的年
     })

QQ截图20170624231049.png

完整代码：


<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8">
       <title>Hello MUI</title>
       <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-status-bar-style" content="black">

       <!--标准mui.css-->
       <link rel="stylesheet" href="mui.min.css">
       <link rel="stylesheet" type="text/css" href="mui.picker.min.css">
       <link rel="stylesheet" type="text/css" href="mui.poppicker.css">
       <!--App自定义的css-->
       <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
       <style type="text/css">
           /*.mui-poppicker-body{
               background-color: white;
               border: 1px solid red;
               color:yellow;
           }*/
           .mui-picker{
               background-color: white;
           }
           .mui-poppicker-header{
               background-color: white;
           }
       </style>
   </head>

   <body>
       <div id="aa" style="margin: 10px auto;background:yellow;heigth:30px;width: 300px;">选择城市</div>
   </body>
   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
   <script type="text/javascript" src="./jquery-1.8.3.min.js" ></script>
   <script src="mui.min.js"></script>
   <script type="text/javascript" src="mui.picker.min.js"></script>
   <script type="text/javascript" src="mui.poppicker.js"></script>
   <script>
var picker = new mui.PopPicker({
   layer: 3,   //3层菜单
   buttons:['取消','确定']   // 显示按钮名字

});
   picker.setData([{      
       value: '110000',
       text: '北京市',
       children: [{
               value: "110101",
               text: "东城区",
               children: [
                   {
                       value: '110111',
                       text:'中关村'
                   },
                   {
                       value: '110112',
                       text:'中关村2'
                   }
               ]
       }],
   
   }, {
       value: '120000',
       text: '天津市',
       children: [
       {
           value: "120101",
           text: "和平区"
       }, {
           value: "120102",
           text: "河东区"
       }, {
           value: "120104",
           text: "南开区",
           children: [
                   {
                       value:'120105',
                       text:'地下城'
                   },
                   {
                       value:'120106',
                       text:'英雄联盟'
                   }
               ]
       }
       ]
   }])
picker.pickers[0].setSelectedIndex(1); //默认选择第1列，第2个元素（即天津市）
picker.pickers[1].setSelectedIndex(2,200,function() {});  //第2列，第三个元素（南开区）
picker.pickers[2].setSelectedIndex(1); // 第3列，（英雄联盟）
document.getElementById('aa').addEventListener('tap',function() {
   picker.show(function(getSelectedItems){   //获取选中的项（数组）
       console.log(getSelectedItems[0].text);  //输出结果为： 天津市
   })
   // picker.show(function(SelectedItem) {
//     console.log(SelectedItem[0].text);
   // })

});
   </script>
</html>