【apicloud】UICityList(城市列表)模块demo

翻滚的胖子
2019-03-06 10:35:23
APP开发
APICloud
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
                <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
                <title>title</title>
                <link rel="stylesheet" type="text/css" href="../css/api.css"/>
                <style>
                        body {
                        }
                        html, body {
                                height: 100%
                        }
                        body {
                                background-color: #fff;
                                margin: 0;
                        }
                        #wrap {
                                height: 100%;
                                position: relative;
                        }
                        #header {
                                padding-top: 20px;
                                background-color: #5082c2;
                                height: 44px;
                                position: relative;
                        }
                        #header h1 {
                                font-size: 20px;
                                height: 44px;
                                line-height: 44px;
                                margin: 0em;
                                color: #fff;
                                margin-left: 100px;
                                margin-right: 100px;
                                text-align: center;
                        }
                        #main {
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-box-pack: center;
                        }
                        a.button {
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-box-pack: center;
                                -webkit-box-align: center;
                                height: 32px;
                                margin: 8px;
                                background-color: rgba(240,240,240,1.0);
                                border-color: rgba(220,220,220,1.0);
                                border-width: 2px;
                                border-style: solid;
                        }
                        a.active {
                                background-color: rgba(240,240,240,0.7);
                        }
                </style>
        </head>
        <body>
                <a class="button" tapmode="active">打开UICityList</a>
                <a class="button" tapmode="active">关闭UICityList</a>
                <a class="button" tapmode="active">显示UICityList</a>
                <a class="button" tapmode="active">隐藏UICityList</a>
        </body>
        <script type="text/javascript" src="../script/api.js"></script>
        <script type="text/javascript">
                apiready = function() {
                        api.addEventListener({
                                name : 'shake'
                        }, function(ret, err) {
                                //close_U()
                                hide_U()
                        });
                };
                function open_U() {
                        var UICityList = api.require('UICityList');
                        UICityList.open({
                                rect : {
                                        x : 0,
                                        y : 0,
                                        w : api.frameWidth,
                                        h : api.frameHeight
                                },
                                resource : 'widget://res/UICityList.json',
                                topCitys : [{
                                        'city' : '北京', //字符串类型；城市
                                        'id' : 110001, //字符串类型；城市编号
                                        'pinyin' : 'beijing' //（可选项）字符串类型；本字段可不传，若不传模块内会生成该城市名的pinyin，以防止城市名中的多音字乱序问题
                                }],
                                styles : {
                                        searchBar : {
                                                bgColor : '#696969',
                                                cancelColor : '#E3E3E3'
                                        },
                                        location : {
                                                color : '#696969',
                                                size : 12
                                        },
                                        sectionTitle : {
                                                bgColor : '#eee',
                                                color : '#000',
                                                size : 12
                                        },
                                        item : {
                                                bgColor : '#fff',
                                                activeBgColor : '#696969',
                                                color : '#000',
                                                size : 14,
                                                height : 40
                                        },
                                        indicator : {
                                                bgColor : '#fff',
                                                color : '#696969'
                                        }
                                },
                                searchType : 'initial',
                                currentCity : '北京',
                                locationWay : 'GPS',
                                hotTitle : '热门城市',
                                fixedOn : api.frameName,
                                placeholder : '输入城市名或首字母查询'
                        }, function(ret, err) {
                                if (ret) {
                                        alert(JSON.stringify(ret));
                                } else {
                                        alert(JSON.stringify(err));
                                }
                        });
                }

                function close_U() {
                        var UICityList = api.require('UICityList');
                        UICityList.close();
                }

                function show_U() {
                        var UICityList = api.require('UICityList');
                        UICityList.show();
                }

                function hide_U() {
                        var UICityList = api.require('UICityList');
                        UICityList.hide();
                }
        </script>
</html>
附带json文件：
链接：https://pan.baidu.com/s/1IyZq19WfY064PAcW-VLvaA
提取码：8kna
本帖引自 https://community.apicloud.com/bbs/thread-77527-1-1.html