mui中picker(选择器)的使用

本文介绍如何使用 MUI 的 PopPicker 组件创建不同层级的下拉选择器,并提供了详细的示例代码,包括普通示例和级联示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

1.引入文件

   1.1、先引入mui.picker.css和mui.picker.js

  1.2、再引入mui-popicker.css和mui-popicker.js

2.实际使用demo

   2.1、标签模板的写法

                 <h5 class="mui-content-padded">普通示例</h5>
                <button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button>
                <div id='userResult' class="ui-alert"></div>
                <h5 class="mui-content-padded">级联示例</h5>
                <button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>二级联动示例 ...</button>
                <div id='cityResult' class="ui-alert"></div>
                <button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button>
                <div id='cityResult3' class="ui-alert"></div>

   2.2、js的写法

  (function($, doc) {
                $.init();
                $.ready(function() {
                    //普通示例
                    var userPicker = new $.PopPicker();
                    userPicker.setData([{
                        value: 'ywj',
                        text: '董事长 叶文洁'
                    }, {
                        value: 'aaa',
                        text: '总经理 艾AA'
                    }, {
                        value: 'lj',
                        text: '罗辑'
                    }, {
                        value: 'ymt',
                        text: '云天明'
                    }, {
                        value: 'shq',
                        text: '史强'
                    }, {
                        value: 'zhbh',
                        text: '章北海'
                    }, {
                        value: 'zhy',
                        text: '庄颜'
                    }, {
                        value: 'gyf',
                        text: '关一帆'
                    }, {
                        value: 'zhz',
                        text: '智子'
                    }, {
                        value: 'gezh', 
                        text: '歌者'
                    }]);
                    var showUserPickerButton = doc.getElementById('showUserPicker');
                    var userResult = doc.getElementById('userResult');
                    showUserPickerButton.addEventListener('tap', function(event) {
                        userPicker.show(function(items) {
                            userResult.innerText = JSON.stringify(items[0]);
                            //返回 false 可以阻止选择框的关闭
                            //return false;
                        });
                    }, false);

                    //-----------------------------------------
                    //级联示例
                    var cityPicker = new $.PopPicker({
                        layer: 2
                    });
                    cityPicker.setData(cityData);
                    var showCityPickerButton = doc.getElementById('showCityPicker');
                    var cityResult = doc.getElementById('cityResult');
                    showCityPickerButton.addEventListener('tap', function(event) {
                        cityPicker.show(function(items) {
                            cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;
                            //返回 false 可以阻止选择框的关闭
                            //return false;
                        });
                    }, false);

                    //-----------------------------------------
                    //                    //级联示例
                    var cityPicker3 = new $.PopPicker({
                        layer: 3
                    });
                    cityPicker3.setData(cityData3);
                    var showCityPickerButton = doc.getElementById('showCityPicker3');
                    var cityResult3 = doc.getElementById('cityResult3');
                    showCityPickerButton.addEventListener('tap', function(event) {
                        cityPicker3.show(function(items) {
                            cityResult3.innerText = "你选择的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
                            //返回 false 可以阻止选择框的关闭
                            //return false;
                        });
                    }, false);
                });

            })(mui, document);

这是红色部分的效果图

另外的两个数据,单独写成一个文件并引入

代码的地址

 

总结:

一、api的步骤和说明

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

  var picker = new mui.PopPicker(); 

2、之后给picker加数据

setData() 支持数据格式为:数组

 picker.setData([{value:'zz',text:'智子'}]); 

3、最后显示picker内容

 picker.show( SelectedItemsCallback ) 

二、具体的代码

步骤1:初始化组件

var userPicker = new $.PopPicker();

步骤2:加数据(也就是点击之后跳出来的数据显示)

userPicker.setData([{
                        value: 'ywj',
                        text: '董事长 叶文洁'
                    }, {
                        value: 'aaa',
                        text: '总经理 艾AA'
                    }, {
                        value: 'lj',
                        text: '罗辑'
                    }, {
                        value: 'ymt',
                        text: '云天明'
                    }, {
                        value: 'shq',
                        text: '史强'
                    }, {
                        value: 'zhbh',
                        text: '章北海'
                    }, {
                        value: 'zhy',
                        text: '庄颜'
                    }, {
                        value: 'gyf',
                        text: '关一帆'
                    }, {
                        value: 'zhz',
                        text: '智子'
                    }, {
                        value: 'gezh', 
                        text: '歌者'
                    }]);

步骤3:    对数据的处理(获取和排版)

            var showUserPickerButton = document.getElementById('showUserPicker');   //获取点击的位置
                    var userResult = document.getElementById('title-text');                          //数据放置的位置
                    showUserPickerButton.addEventListener('tap', function(event) {           //回调函数的使用
                        userPicker.show(function(items) {
                            userResult.innerText = JSON.stringify(items[0].text).replace("\"","").replace("\"","") //获取数据,去掉双引号并放到指定位置;
                            //返回 false 可以阻止选择框的关闭
                            //return false;
                        })
                    }, false);

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值