MUI的picker选择器

Dear 丶 2024-04-17 15:50 77阅读 0赞

# 引言 #

选择器跟下拉列表选择器很相似，某种程度上我们可以把它直接看出下拉列表选择器，后面笔者记录的城市二级联动和城市三级联动也是从该基础上进行拓展的，我们可以通过编码自己实现一级选择器、二级选择器以及三级选择器等等。

**实现的效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70][]

**注：使用picker选择器，务必在mui.js/css后中再引用**

> `mui.picker.css mui.poppicker.css`
> 
> `mui.picker.js mui.poppicker.js`

或者引入压缩过的

> `mui.picker.min.css`
> 
> `mui.picker.min.js`

使用picker选择器的三步骤

步骤1：初始化

var picker = new mui.PopPicker();

步骤2：设置数据(数组的形式)

picker.setData([{
    	value: 'ts',
    	text: '唐僧'
    }, {
    	value: 'swk',
    	text: '孙悟空'
    }, {
    	value: 'zbj',
    	text: '猪八戒'
    }, {
    	value: 'shs',
    	text: '沙和尚'
    }]);

步骤3：调用

picker.show( function(selectItems){})

**案例源码**

<!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>
    		<link rel="stylesheet" href="css/mui.min.css">
    		<link href="css/mui.picker.css" rel="stylesheet" />
    		<link href="css/mui.poppicker.css" rel="stylesheet" />
    		<style>
    			.mui-btn {
    				font-size: 16px;
    				padding: 8px;
    				margin: 3px;
    			}
    			
    			.ui-alert {
    				text-align: center;
    				padding: 20px 10px;
    				font-size: 16px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<header class="mui-bar mui-bar-nav">
    			<h1 class="mui-title">一级联动</h1>
    		</header>
    		<div class="mui-content">
    			<div class="mui-content-padded">
    				<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级联动选择器</button>
    				<div id='userResult' class="ui-alert"></div>
    			</div>
    		</div>
    		<script src="js/mui.min.js"></script>
    		<script src="js/mui.picker.js"></script>
    		<script src="js/mui.poppicker.js"></script>
    		<script>
    			mui.init();
    			mui.ready(function() {
    				var userPicker = new mui.PopPicker();
    				userPicker.setData([{
    					value: 'ts',
    					text: '唐僧'
    				}, {
    					value: 'swk',
    					text: '孙悟空'
    				}, {
    					value: 'zbj',
    					text: '猪八戒'
    				}, {
    					value: 'shs',
    					text: '沙和尚'
    				}]);
    				var showUserPickerButton = document.getElementById('showUserPicker');
    				var userResult = document.getElementById('userResult');
    				showUserPickerButton.addEventListener('tap', function(event) {
    					userPicker.show(function(items) {
    						userResult.innerText = JSON.stringify(items[0]);
    						// 注:如果不想选择后直接关闭窗口可以加上 return false 
    						// return false;
    					});
    				}, false);
    			});
    		</script>
    	</body>
    
    </html>

GitHub：

> [https://github.com/lwqbrell/mui\_one\_select][https_github.com_lwqbrell_mui_one_select]

百度云下载

> 链接：[https://pan.baidu.com/s/1vFKdKYMSvlEOLZ\_Wg9uqrw ][https_pan.baidu.com_s_1vFKdKYMSvlEOLZ_Wg9uqrw]  
> 提取码：yzq7

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a7a6b7e39d2f41fc9c96af2b70272c31.png
[https_github.com_lwqbrell_mui_one_select]: https://github.com/lwqbrell/mui_one_select
[https_pan.baidu.com_s_1vFKdKYMSvlEOLZ_Wg9uqrw]: https://pan.baidu.com/s/1vFKdKYMSvlEOLZ_Wg9uqrw%C2%A0