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:

1
2
3
4
<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代码:

1
2
3
4
5
 <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>

  

 

样式代码(样式主要是根据自己的页面来调整的):

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
<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>中的代码

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
<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

 

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

 

posted @   W_serendipity  阅读(2390)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示