摘要：
使用picker的时候一直没有什么效果 后来根据网上的一些示例 和mui帮助文档才得以实行的效果 总结了一下使用方法 效果图：依次是： 一级联 》二级联 》 三级联 注意点:1.必须引用的js和csspoppicker组
使用picker的时候一直没有什么效果 后来根据网上的一些示例 和mui帮助文档才得以实行的效果 总结了一下使用方法
效果图：
依次是： 一级联 》二级联 》 三级联
注意点:
1.必须引用的js和css
poppicker组件依赖的js：
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
2.城市联动效果js 封装的着城市名的信息
<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
3.poppicker组件依赖的css：
css引入是必须加上rel="stylesheet" 否则效果不显示
<link href="css/mui.picker.css" rel="stylesheet" />
<link href="css/mui.poppicker.css" rel="stylesheet" />
总之上面的js和css都要
头部位置导入的js/css:
1 2 3 4 | <scriptsrc="js/mui.min.js"></script><linkhref="css/mui.min.css" rel="stylesheet" /><linkhref="css/mui.picker.css" rel="stylesheet" /><linkhref="css/mui.poppicker.css" rel="stylesheet" /> |
导入的js/css代码：
1 2 3 4 5 | <scriptsrc="js/mui.min.js"></script><scriptsrc="js/mui.picker.js"></script><scriptsrc="js/mui.poppicker.js"></script><scriptsrc="js/city.data.js" type="text/javascript" charset="utf-8"></script><scriptsrc="js/city.data-3.js" type="text/javascript" charset="utf-8"></script> |
样式代码（样式主要是根据自己的页面来调整的）：
1 2 3 4 5 | .ui-alert { text-align: left;/*文本排列*/ padding: 15px 10px;/*外边距 两个值 代表 上下边距 和左右边距 四个值代表上 左 下 右 （顺时针）*/ font-size: 16px;/*字体大小*/ } |
html代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <divclass="mui-content"> <formclass="mui-input-group"> <divclass="mui-input-row"> <label>id</label> <inputtype="text" class="mui-input-clear" placeholder="请输入id"> </div> <divclass="mui-input-row"> <label>用户名</label> <inputtype="text" class="mui-input-clear" placeholder="请输入用户名"> </div> <divclass="mui-input-row "> <label>性别</label> <buttonclass="mui-btn mui-btn-blue" id="ChoiceSexButton">选择性别</button> <divid='sexResult' class="ui-alert"></div> </div> <divclass="mui-input-row "> <label>所在城市</label> <buttonclass="mui-btn mui-btn-blue" id="ChoiceCityButton">选择城市</button> <divid='cityResult' class="ui-alert"></div> </div> <h5class="mui-content-padded">爱好</h5> <divclass="mui-input-row mui-checkbox"> <label>音乐</label> <inputname="checkbox1" value="Item 3" type="checkbox"> </div> <divclass="mui-input-row mui-checkbox"> <label>电影</label> <inputname="checkbox1" value="Item 4" type="checkbox" checked> </div> <divclass="mui-input-row mui-checkbox"> <label>游泳</label> <inputname="checkbox1" value="Item 3" type="checkbox"> </div> <divclass="mui-input-row mui-checkbox"> <label>篮球</label> <inputname="checkbox1" value="Item 4" type="checkbox"> </div> <divclass="mui-button-row"> <buttontype="button" class="mui-btn-success">添加信息<spanclass="mui-badge mui-badge-success">2</span></button> <ahref="show_info.html"><buttontype="button" class="mui-btn mui-btn-primary">展示信息</button></a> </div> </form> </div> |
<script>中的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <scripttype="text/javascript"> mui.init() //初始化popPicker组件 var sexPicker = new mui.PopPicker({ //buttons:['点我取消','点我确认']//显示按钮 不写 默认为'取消','确认' }); //假如是二联则在括号里面加入{layer:2} 城市列表中有示例 //给picker对象添加数据 sexPicker.setData([{ value: "1", text: "男" }, { value: '2', text: '女' }]); //一级联示例 var ChoiceSexButton = document.getElementById('ChoiceSexButton'); var sexResult = document.getElementById('sexResult'); ChoiceSexButton.addEventListener('tap', function(event) { //显示picker sexPicker.show(function(items) { //弹出列表并在里面写业务代码 //userResult.innerText = JSON.stringify(items[0]); //返回 false 可以阻止选择框的关闭 //return false; var itemCallback = sexPicker.getSelectedItems(); //把选择的结果显示id为sexResult的列表中（需要显示的位置） sexResult.innerText = itemCallback[0].text; }); }, false); //----------------------------------------- //二级联示例 var cityPicker = new mui.PopPicker({ layer: 2 }); //如果使用二级联 则使用children属性 cityPicker.setData([{ value: '110000', text: '北京市', children: [{ value: "110101", text: "东城区" }] }, { value: '120000', text: '天津市', children: [{ value: "120101", text: "和平区" }, { value: "120102", text: "河东区" }, { value: "120104", text: "南开区" }] }]); var showCityPickerButton = document.getElementById('ChoiceCityButton'); var cityResult = document.getElementById('cityResult'); showCityPickerButton.addEventListener('tap', function(event) { cityPicker.show(function(items) { cityResult.innerText = items[0].text + " " + items[1].text; //返回 false 可以阻止选择框的关闭 //return false; }); }, false); //-------------------------------------------------- //三级联示例/* var cityPicker = new mui.PopPicker({ layer: 3,//layer 显示列数 }); //使用封装的城市数据 cityPicker.setData(cityData3); var ChoiceCityButton = document.getElementById('ChoiceCityButton'); var cityResult = document.getElementById('cityResult'); ChoiceCityButton.addEventListener('tap', function(event) { cityPicker.show(function() { //返回 false 可以阻止选择框的关闭 var itemCallback=cityPicker.getSelectedItems(); //把选择的结果显示在id为cityResult的列表中 cityResult.innerText =itemCallback[0].text+" "+itemCallback[1].text+" "+itemCallback[2].text; }); }, false);*/ </script> |
代码主要来源于 https://www.cnblogs.com/claireyu1219/p/6170246.html
与 mui帮助文档 http://dev.dcloud.net.cn/mui/ui/#picker
如果代码或者思路有什么不对的地方请路过的大神指点 ，毕竟我还是个小菜鸟， 太多的地方不懂 ，太多的知识需要学习