mui-——picker使用示例

使用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:

		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />

　　

导入的js/css代码：

　　　　　<script src="js/mui.min.js"></script>
	<script src="js/mui.picker.js"></script>
	<script src="js/mui.poppicker.js"></script>
	<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>

　　

 

样式代码（样式主要是根据自己的页面来调整的）：

.ui-alert {
				text-align: left;/*文本排列*/
				padding: 15px 10px;/*外边距  两个值 代表 上下边距 和左右边距 四个值代表上 左 下 右   （顺时针）*/
				font-size: 16px;/*字体大小*/
			}

　　

html代码：

	<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>id</label>
					<input type="text" class="mui-input-clear" placeholder="请输入id">
				</div>
				<div class="mui-input-row">
					<label>用户名</label>
					<input type="text" class="mui-input-clear" placeholder="请输入用户名">
				</div>
				<div class="mui-input-row ">
					<label>性别</label>
					<button class="mui-btn mui-btn-blue" id="ChoiceSexButton">选择性别</button>
					<div id='sexResult' class="ui-alert"></div>
				</div>
				<div class="mui-input-row ">
					<label>所在城市</label>
					<button class="mui-btn mui-btn-blue" id="ChoiceCityButton">选择城市</button>
					<div id='cityResult' class="ui-alert"></div>
				</div>

				<h5 class="mui-content-padded">爱好</h5>
				<div class="mui-input-row mui-checkbox">
					<label>音乐</label>
					<input name="checkbox1" value="Item 3" type="checkbox">
				</div>
				<div class="mui-input-row mui-checkbox">
					<label>电影</label>
					<input name="checkbox1" value="Item 4" type="checkbox" checked>
				</div>
				<div class="mui-input-row mui-checkbox">
					<label>游泳</label>
					<input name="checkbox1" value="Item 3" type="checkbox">
				</div>
				<div class="mui-input-row mui-checkbox">
					<label>篮球</label>
					<input name="checkbox1" value="Item 4" type="checkbox">
				</div>
				<div class="mui-button-row">
					<button type="button" class="mui-btn-success">添加信息<span class="mui-badge mui-badge-success">2</span></button>
					<a href="show_info.html"><button type="button" class="mui-btn mui-btn-primary">展示信息</button></a>
				</div>
			</form>
		</div>

　　<script>中的代码

<script type="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

 

　　如果代码或者思路有什么不对的地方请路过的大神指点 ，毕竟我还是个小菜鸟， 太多的地方不懂  ，太多的知识需要学习

 

转载于:https://www.cnblogs.com/w-serendipity/p/8395488.html