【分享交流】MUI实现城市列表的选择

项目需要选择城市,MUI给的案例是机场的,所以只能自己改写了;
城市列表的数据组合了好久,现在分享给大家,相互交流学习;

效果:

完整案例在附件:


24 分享
蔡繁荣 五块钱的果汁 DCloud_MUI_CHB 朋也 开发佬 比恩杨 jijinduoduo shuaige mrs陈 yefei1992 DCloud_客服_Trust 明明航 441610204@qq.com 610812253@qq.com 蓦然mmmmm DCloud_heavensoft 1516045937@qq.com zyh.95@163.com WEB大白 迷糊熊 Muffin adfasdfasf 1066494007@qq.com tao123456
zoorun@126.com

zoorun@126.com

<!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 href="../../css/mui.min.css" rel="stylesheet" />
<link href="../../css/mui.indexedlist.css" rel="stylesheet" />
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
</style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">indexed list(索引列表)</h1>
</header>
<div class="mui-content">
<div id='list' class="mui-indexed-list">
<div class="mui-indexed-list-search mui-input-row mui-search">
<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场">
</div>
<div class="mui-indexed-list-bar">
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>
</div>
<div class="mui-indexed-list-alert"></div>
<div class="mui-indexed-list-inner">
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul id="ul_city" class="mui-table-view">
<li data-group="gps" class="mui-table-view-divider mui-group-list-group">定位当前城市</li>
<li class="mui-table-view-cell mui-group-list-item"><span class="mui-icon mui-icon-location"></span><span id="positionCity">正在定位...</span></li>
<li data-group="A" class="mui-table-view-divider mui-group-list-group">A</li>
<li class="mui-table-view-cell mui-group-list-item">澳门</li>
<li class="mui-table-view-cell mui-group-list-item">安康市</li>
<li class="mui-table-view-cell mui-group-list-item">安庆市</li>
<li class="mui-table-view-cell mui-group-list-item">安顺市</li>
<li class="mui-table-view-cell mui-group-list-item">安阳市</li>
<li class="mui-table-view-cell mui-group-list-item">鞍山市</li>
<li class="mui-table-view-cell mui-group-list-item">阿克苏</li>
<li class="mui-table-view-cell mui-group-list-item">阿拉尔市</li>
<li class="mui-table-view-cell mui-group-list-item">阿拉善盟</li>
<li class="mui-table-view-cell mui-group-list-item">阿勒泰</li>
<li class="mui-table-view-cell mui-group-list-item">阿里</li>
<li data-group="B" class="mui-table-view-divider mui-group-list-group">B</li>
<li class="mui-table-view-cell mui-group-list-item">巴彦淖尔市</li>
<li class="mui-table-view-cell mui-group-list-item">巴中市</li>
<li class="mui-table-view-cell mui-group-list-item">巴州</li>
<li class="mui-table-view-cell mui-group-list-item">白城市</li>
<li class="mui-table-view-cell mui-group-list-item">白沙县</li>
<li class="mui-table-view-cell mui-group-list-item">白山市</li>
<li class="mui-table-view-cell mui-group-list-item">白银市</li>
<li class="mui-table-view-cell mui-group-list-item">百色市</li>
<li class="mui-table-view-cell mui-group-list-item">蚌埠市</li>
<li class="mui-table-view-cell mui-group-list-item">包头市</li>
<li class="mui-table-view-cell mui-group-list-item">宝鸡市</li>
<li class="mui-table-view-cell mui-group-list-item">保定市</li>
<li class="mui-table-view-cell mui-group-list-item">保山市</li>
<li class="mui-table-view-cell mui-group-list-item">保亭县</li>
<li class="mui-table-view-cell mui-group-list-item">北海市</li>
<li class="mui-table-view-cell mui-group-list-item">北京市</li>
<li class="mui-table-view-cell mui-group-list-item">本溪市</li>
<li class="mui-table-view-cell mui-group-list-item">毕节</li>
<li class="mui-table-view-cell mui-group-list-item">滨州市</li>
<li class="mui-table-view-cell mui-group-list-item">亳州市</li>
<li class="mui-table-view-cell mui-group-list-item">博州</li>
<li data-group="C" class="mui-table-view-divider mui-group-list-group">C</li>
<li class="mui-table-view-cell mui-group-list-item">长春市</li>
<li class="mui-table-view-cell mui-group-list-item">长沙市</li>
<li class="mui-table-view-cell mui-group-list-item">长治市</li>
<li class="mui-table-view-cell mui-group-list-item">沧州市</li>
<li class="mui-table-view-cell mui-group-list-item">昌都</li>
<li class="mui-table-view-cell mui-group-list-item">昌吉州</li>
<li class="mui-table-view-cell mui-group-list-item">昌江县</li>
<li class="mui-table-view-cell mui-group-list-item">常德市</li>
<li class="mui-table-view-cell mui-group-list-item">常州市</li>
<li class="mui-table-view-cell mui-group-list-item">巢湖市</li>
<li class="mui-table-view-cell mui-group-list-item">朝阳市</li>
<li class="mui-table-view-cell mui-group-list-item">潮州市</li>
<li class="mui-table-view-cell mui-group-list-item">郴州市</li>
<li class="mui-table-view-cell mui-group-list-item">成都市</li>
<li class="mui-table-view-cell mui-group-list-item">承德市</li>
<li class="mui-table-view-cell mui-group-list-item">澄迈县</li>
<li class="mui-table-view-cell mui-group-list-item">重庆市</li>
<li class="mui-table-view-cell mui-group-list-item">池州市</li>
<li class="mui-table-view-cell mui-group-list-item">赤峰市</li>
<li class="mui-table-view-cell mui-group-list-item">崇左市</li>
<li class="mui-table-view-cell mui-group-list-item">滁州市</li>
<li class="mui-table-view-cell mui-group-list-item">楚雄州</li>
<li data-group="D" class="mui-table-view-divider mui-group-list-group">D</li>
<li class="mui-table-view-cell mui-group-list-item">达州市</li>
<li class="mui-table-view-cell mui-group-list-item">大理州</li>
<li class="mui-table-view-cell mui-group-list-item">大连市</li>
<li class="mui-table-view-cell mui-group-list-item">大庆市</li>
<li class="mui-table-view-cell mui-group-list-item">大同市</li>
<li class="mui-table-view-cell mui-group-list-item">大兴安岭</li>
<li class="mui-table-view-cell mui-group-list-item">丹东市</li>
<li class="mui-table-view-cell mui-group-list-item">儋州市</li>
<li class="mui-table-view-cell mui-group-list-item">德宏州</li>
<li class="mui-table-view-cell mui-group-list-item">德阳市</li>
<li class="mui-table-view-cell mui-group-list-item">德州市</li>
<li class="mui-table-view-cell mui-group-list-item">迪庆州</li>
<li class="mui-table-view-cell mui-group-list-item">定安县</li>
<li class="mui-table-view-cell mui-group-list-item">定西市</li>
<li class="mui-table-view-cell mui-group-list-item">东方市</li>
<li class="mui-table-view-cell mui-group-list-item">东莞市</li>
<li class="mui-table-view-cell mui-group-list-item">东营市</li>
<li data-group="E" class="mui-table-view-divider mui-group-list-group">E</li>
<li class="mui-table-view-cell mui-group-list-item">鄂尔多斯市</li>
<li class="mui-table-view-cell mui-group-list-item">鄂州市</li>
<li class="mui-table-view-cell mui-group-list-item">恩施州</li>
<li data-group="F" class="mui-table-view-divider mui-group-list-group">F</li>
<li class="mui-table-view-cell mui-group-list-item">防城港市</li>
<li class="mui-table-view-cell mui-group-list-item">佛山市</li>
<li class="mui-table-view-cell mui-group-list-item">福州市</li>
<li class="mui-table-view-cell mui-group-list-item">抚顺市</li>
<li class="mui-table-view-cell mui-group-list-item">抚州市</li>
<li class="mui-table-view-cell mui-group-list-item">阜新市</li>
<li class="mui-table-view-cell mui-group-list-item">阜阳市</li>
<li data-group="G" class="mui-table-view-divider mui-group-list-group">G</li>
<li class="mui-table-view-cell mui-group-list-item">甘南州</li>
<li class="mui-table-view-cell mui-group-list-item">甘孜州</li>
<li class="mui-table-view-cell mui-group-list-item">赣州市</li>
<li class="mui-table-view-cell mui-group-list-item">高雄市</li>
<li class="mui-table-view-cell mui-group-list-item">固原市</li>
<li class="mui-table-view-cell mui-group-list-item">广安市</li>
<li class="mui-table-view-cell mui-group-list-item">广元市</li>
<li class="mui-table-view-cell mui-group-list-item">广州市</li>
<li class="mui-table-view-cell mui-group-list-item">贵港市</li>
<li class="mui-table-view-cell mui-group-list-item">贵阳市</li>
<li class="mui-table-view-cell mui-group-list-item">桂林市</li>
<li class="mui-table-view-cell mui-group-list-item">果洛州</li>
<li data-group="H" class="mui-table-view-divider mui-group-list-group">H</li>
<li class="mui-table-view-cell mui-group-list-item">哈尔滨市</li>
<li class="mui-table-view-cell mui-group-list-item">哈密</li>
<li class="mui-table-view-cell mui-group-list-item">海北州</li>
<li class="mui-table-view-cell mui-group-list-item">海东</li>
<li class="mui-table-view-cell mui-group-list-item">海口市</li>
<li class="mui-table-view-cell mui-group-list-item">海南州</li>
<li class="mui-table-view-cell mui-group-list-item">海西州</li>
<li class="mui-table-view-cell mui-group-list-item">邯郸市</li>
<li class="mui-table-view-cell mui-group-list-item">汉中市</li>
<li class="mui-table-view-cell mui-group-list-item">杭州市</li>
<li class="mui-table-view-cell mui-group-list-item">合肥市</li>
<li class="mui-table-view-cell mui-group-list-item">和田</li>
<li class="mui-table-view-cell mui-group-list-item">河池市</li>
<li class="mui-table-view-cell mui-group-list-item">河源市</li>
<li class="mui-table-view-cell mui-group-list-item">菏泽市</li>
<li class="mui-table-view-cell mui-group-list-item">贺州市</li>
<li class="mui-table-view-cell mui-group-list-item">鹤壁市</li>
<li class="mui-table-view-cell mui-group-list-item">鹤岗市</li>
<li class="mui-table-view-cell mui-group-list-item">黑河市</li>
<li class="mui-table-view-cell mui-group-list-item">衡水市</li>
<li class="mui-table-view-cell mui-group-list-item">衡阳市</li>
<li class="mui-table-view-cell mui-group-list-item">红河州</li>
<li class="mui-table-view-cell mui-group-list-item">呼和浩特市</li>
<li class="mui-table-view-cell mui-group-list-item">呼伦贝尔市</li>
<li class="mui-table-view-cell mui-group-list-item">葫芦岛市</li>
<li class="mui-table-view-cell mui-group-list-item">湖州市</li>
<li class="mui-table-view-cell mui-group-list-item">怀化市</li>
<li class="mui-table-view-cell mui-group-list-item">淮安市</li>
<li class="mui-table-view-cell mui-group-list-item">淮北市</li>
<li class="mui-table-view-cell mui-group-list-item">淮南市</li>
<li class="mui-table-view-cell mui-group-list-item">黄冈市</li>
<li class="mui-table-view-cell mui-group-list-item">黄南州</li>
<li class="mui-table-view-cell mui-group-list-item">黄山市</li>
<li class="mui-table-view-cell mui-group-list-item">黄石市</li>
<li class="mui-table-view-cell mui-group-list-item">惠州市</li>
<li data-group="J" class="mui-table-view-divider mui-group-list-group">J</li>
<li class="mui-table-view-cell mui-group-list-item">鸡西市</li>
<li class="mui-table-view-cell mui-group-list-item">基隆市</li>
<li class="mui-table-view-cell mui-group-list-item">吉安市</li>
<li class="mui-table-view-cell mui-group-list-item">吉林市</li>
<li class="mui-table-view-cell mui-group-list-item">济南市</li>
<li class="mui-table-view-cell mui-group-list-item">济宁市</li>
<li class="mui-table-view-cell mui-group-list-item">济源市</li>
<li class="mui-table-view-cell mui-group-list-item">佳木斯市</li>
<li class="mui-table-view-cell mui-group-list-item">嘉兴市</li>
<li class="mui-table-view-cell mui-group-list-item">嘉义市</li>
<li class="mui-table-view-cell mui-group-list-item">嘉峪关市</li>
<li class="mui-table-view-cell mui-group-list-item">江门市</li>
<li class="mui-table-view-cell mui-group-list-item">焦作市</li>
<li class="mui-table-view-cell mui-group-list-item">揭阳市</li>
<li class="mui-table-view-cell mui-group-list-item">金昌市</li>
<li class="mui-table-view-cell mui-group-list-item">金华市</li>
<li class="mui-table-view-cell mui-group-list-item">锦州市</li>
<li class="mui-table-view-cell mui-group-list-item">晋城市</li>
<li class="mui-table-view-cell mui-group-list-item">晋中市</li>
<li class="mui-table-view-cell mui-group-list-item">荆门市</li>
<li class="mui-table-view-cell mui-group-list-item">荆州市</li>
<li class="mui-table-view-cell mui-group-list-item">景德镇市</li>
<li class="mui-table-view-cell mui-group-list-item">九江市</li>
<li class="mui-table-view-cell mui-group-list-item">酒泉市</li>
<li data-group="K" class="mui-table-view-divider mui-group-list-group">K</li>
<li class="mui-table-view-cell mui-group-list-item">喀什</li>
<li class="mui-table-view-cell mui-group-list-item">开封市</li>
<li class="mui-table-view-cell mui-group-list-item">克拉玛依市</li>
<li class="mui-table-view-cell mui-group-list-item">克州</li>
<li class="mui-table-view-cell mui-group-list-item">昆明市</li>
<li data-group="L" class="mui-table-view-divider mui-group-list-group">L</li>
<li class="mui-table-view-cell mui-group-list-item">拉萨市</li>
<li class="mui-table-view-cell mui-group-list-item">来宾市</li>
<li class="mui-table-view-cell mui-group-list-item">莱芜市</li>
<li class="mui-table-view-cell mui-group-list-item">兰州市</li>
<li class="mui-table-view-cell mui-group-list-item">廊坊市</li>
<li class="mui-table-view-cell mui-group-list-item">乐东县</li>
<li class="mui-table-view-cell mui-group-list-item">乐山市</li>
<li class="mui-table-view-cell mui-group-list-item">丽江市</li>
<li class="mui-table-view-cell mui-group-list-item">丽水市</li>
<li class="mui-table-view-cell mui-group-list-item">连云港市</li>
<li class="mui-table-view-cell mui-group-list-item">凉山州</li>
<li class="mui-table-view-cell mui-group-list-item">辽阳市</li>
<li class="mui-table-view-cell mui-group-list-item">辽源市</li>
<li class="mui-table-view-cell mui-group-list-item">聊城市</li>
<li class="mui-table-view-cell mui-group-list-item">林芝</li>
<li class="mui-table-view-cell mui-group-list-item">临沧市</li>
<li class="mui-table-view-cell mui-group-list-item">临汾市</li>
<li class="mui-table-view-cell mui-group-list-item">临高县</li>
<li class="mui-table-view-cell mui-group-list-item">临夏州</li>
<li class="mui-table-view-cell mui-group-list-item">临沂市</li>
<li class="mui-table-view-cell mui-group-list-item">陵水县</li>
<li class="mui-table-view-cell mui-group-list-item">柳州市</li>
<li class="mui-table-view-cell mui-group-list-item">六安市</li>
<li class="mui-table-view-cell mui-group-list-item">六盘水市</li>
<li class="mui-table-view-cell mui-group-list-item">龙岩市</li>
<li class="mui-table-view-cell mui-group-list-item">陇南市</li>
<li class="mui-table-view-cell mui-group-list-item">娄底市</li>
<li class="mui-table-view-cell mui-group-list-item">泸州市</li>
<li class="mui-table-view-cell mui-group-list-item">洛阳市</li>
<li class="mui-table-view-cell mui-group-list-item">漯河市</li>
<li class="mui-table-view-cell mui-group-list-item">吕梁市</li>
<li data-group="M" class="mui-table-view-divider mui-group-list-group">M</li>
<li class="mui-table-view-cell mui-group-list-item">马鞍山市</li>
<li class="mui-table-view-cell mui-group-list-item">茂名市</li>
<li class="mui-table-view-cell mui-group-list-item">眉山市</li>
<li class="mui-table-view-cell mui-group-list-item">梅州市</li>
<li class="mui-table-view-cell mui-group-list-item">绵阳市</li>
<li class="mui-table-view-cell mui-group-list-item">牡丹江市</li>
<li data-group="N" class="mui-table-view-divider mui-group-list-group">N</li>
<li class="mui-table-view-cell mui-group-list-item">那曲</li>
<li class="mui-table-view-cell mui-group-list-item">南昌市</li>
<li class="mui-table-view-cell mui-group-list-item">南充市</li>
<li class="mui-table-view-cell mui-group-list-item">南京市</li>
<li class="mui-table-view-cell mui-group-list-item">南宁市</li>
<li class="mui-table-view-cell mui-group-list-item">南平市</li>
<li class="mui-table-view-cell mui-group-list-item">南通市</li>
<li class="mui-table-view-cell mui-group-list-item">南阳市</li>
<li class="mui-table-view-cell mui-group-list-item">内江市</li>
<li class="mui-table-view-cell mui-group-list-item">宁波市</li>
<li class="mui-table-view-cell mui-group-list-item">宁德市</li>
<li class="mui-table-view-cell mui-group-list-item">怒江州</li>
<li data-group="P" class="mui-table-view-divider mui-group-list-group">P</li>
<li class="mui-table-view-cell mui-group-list-item">攀枝花市</li>
<li class="mui-table-view-cell mui-group-list-item">盘锦市</li>
<li class="mui-table-view-cell mui-group-list-item">平顶山市</li>
<li class="mui-table-view-cell mui-group-list-item">平凉市</li>
<li class="mui-table-view-cell mui-group-list-item">萍乡市</li>
<li class="mui-table-view-cell mui-group-list-item">莆田市</li>
<li class="mui-table-view-cell mui-group-list-item">濮阳市</li>
<li class="mui-table-view-cell mui-group-list-item">普洱市</li>
<li data-group="Q" class="mui-table-view-divider mui-group-list-group">Q</li>
<li class="mui-table-view-cell mui-group-list-item">七台河市</li>
<li class="mui-table-view-cell mui-group-list-item">齐齐哈尔市</li>
<li class="mui-table-view-cell mui-group-list-item">潜江市</li>
<li class="mui-table-view-cell mui-group-list-item">黔东南州</li>
<li class="mui-table-view-cell mui-group-list-item">黔南州</li>
<li class="mui-table-view-cell mui-group-list-item">黔西南州</li>
<li class="mui-table-view-cell mui-group-list-item">钦州市</li>
<li class="mui-table-view-cell mui-group-list-item">秦皇岛市</li>
<li class="mui-table-view-cell mui-group-list-item">青岛市</li>
<li class="mui-table-view-cell mui-group-list-item">清远市</li>
<li class="mui-table-view-cell mui-group-list-item">庆阳市</li>
<li class="mui-table-view-cell mui-group-list-item">琼海市</li>
<li class="mui-table-view-cell mui-group-list-item">琼中县</li>
<li class="mui-table-view-cell mui-group-list-item">衢州市</li>
<li class="mui-table-view-cell mui-group-list-item">曲靖市</li>
<li class="mui-table-view-cell mui-group-list-item">泉州市</li>
<li data-group="R" class="mui-table-view-divider mui-group-list-group">R</li>
<li class="mui-table-view-cell mui-group-list-item">日喀则</li>
<li class="mui-table-view-cell mui-group-list-item">日照市</li>
<li data-group="S" class="mui-table-view-divider mui-group-list-group">S</li>
<li class="mui-table-view-cell mui-group-list-item">三门峡市</li>
<li class="mui-table-view-cell mui-group-list-item">三明市</li>
<li class="mui-table-view-cell mui-group-list-item">三亚市</li>
<li class="mui-table-view-cell mui-group-list-item">厦门市</li>
<li class="mui-table-view-cell mui-group-list-item">山南</li>
<li class="mui-table-view-cell mui-group-list-item">汕头市</li>
<li class="mui-table-view-cell mui-group-list-item">汕尾市</li>
<li class="mui-table-view-cell mui-group-list-item">商洛市</li>
<li class="mui-table-view-cell mui-group-list-item">商丘市</li>
<li class="mui-table-view-cell mui-group-list-item">上海市</li>
<li class="mui-table-view-cell mui-group-list-item">上饶市</li>
<li class="mui-table-view-cell mui-group-list-item">韶关市</li>
<li class="mui-table-view-cell mui-group-list-item">邵阳市</li>
<li class="mui-table-view-cell mui-group-list-item">绍兴市</li>
<li class="mui-table-view-cell mui-group-list-item">深圳市</li>
<li class="mui-table-view-cell mui-group-list-item">神农架</li>
<li class="mui-table-view-cell mui-group-list-item">沈阳市</li>
<li class="mui-table-view-cell mui-group-list-item">十堰市</li>
<li class="mui-table-view-cell mui-group-list-item">石河子市</li>
<li class="mui-table-view-cell mui-group-list-item">石家庄市</li>
<li class="mui-table-view-cell mui-group-list-item">石嘴山市</li>
<li class="mui-table-view-cell mui-group-list-item">双鸭山市</li>
<li class="mui-table-view-cell mui-group-list-item">朔州市</li>
<li class="mui-table-view-cell mui-group-list-item">四平市</li>
<li class="mui-table-view-cell mui-group-list-item">松原市</li>
<li class="mui-table-view-cell mui-group-list-item">苏州市</li>
<li class="mui-table-view-cell mui-group-list-item">绥化市</li>
<li class="mui-table-view-cell mui-group-list-item">随州市</li>
<li class="mui-table-view-cell mui-group-list-item">遂宁市</li>
<li data-group="T" class="mui-table-view-divider mui-group-list-group">T</li>
<li class="mui-table-view-cell mui-group-list-item">塔城</li>
<li class="mui-table-view-cell mui-group-list-item">台北市</li>
<li class="mui-table-view-cell mui-group-list-item">台南市</li>
<li class="mui-table-view-cell mui-group-list-item">台中市</li>
<li class="mui-table-view-cell mui-group-list-item">台州市</li>
<li class="mui-table-view-cell mui-group-list-item">太原市</li>
<li class="mui-table-view-cell mui-group-list-item">泰安市</li>
<li class="mui-table-view-cell mui-group-list-item">泰州市</li>
<li class="mui-table-view-cell mui-group-list-item">唐山市</li>
<li class="mui-table-view-cell mui-group-list-item">天津市</li>
<li class="mui-table-view-cell mui-group-list-item">天门市</li>
<li class="mui-table-view-cell mui-group-list-item">天水市</li>
<li class="mui-table-view-cell mui-group-list-item">铁岭市</li>
<li class="mui-table-view-cell mui-group-list-item">通化市</li>
<li class="mui-table-view-cell mui-group-list-item">通辽市</li>
<li class="mui-table-view-cell mui-group-list-item">铜川市</li>
<li class="mui-table-view-cell mui-group-list-item">铜陵市</li>
<li class="mui-table-view-cell mui-group-list-item">铜仁</li>
<li class="mui-table-view-cell mui-group-list-item">图木舒克市</li>
<li class="mui-table-view-cell mui-group-list-item">吐鲁番</li>
<li class="mui-table-view-cell mui-group-list-item">屯昌县</li>
<li data-group="W" class="mui-table-view-divider mui-group-list-group">W</li>
<li class="mui-table-view-cell mui-group-list-item">万宁市</li>
<li class="mui-table-view-cell mui-group-list-item">威海市</li>
<li class="mui-table-view-cell mui-group-list-item">潍坊市</li>
<li class="mui-table-view-cell mui-group-list-item">渭南市</li>
<li class="mui-table-view-cell mui-group-list-item">温州市</li>
<li class="mui-table-view-cell mui-group-list-item">文昌市</li>
<li class="mui-table-view-cell mui-group-list-item">文山州</li>
<li class="mui-table-view-cell mui-group-list-item">乌海市</li>
<li class="mui-table-view-cell mui-group-list-item">乌兰察布市</li>
<li class="mui-table-view-cell mui-group-list-item">乌鲁木齐市</li>
<li class="mui-table-view-cell mui-group-list-item">无锡市</li>
<li class="mui-table-view-cell mui-group-list-item">芜湖市</li>
<li class="mui-table-view-cell mui-group-list-item">吴忠市</li>
<li class="mui-table-view-cell mui-group-list-item">梧州市</li>
<li class="mui-table-view-cell mui-group-list-item">五家渠市</li>
<li class="mui-table-view-cell mui-group-list-item">五指山市</li>
<li class="mui-table-view-cell mui-group-list-item">武汉市</li>
<li class="mui-table-view-cell mui-group-list-item">武威市</li>
<li data-group="X" class="mui-table-view-divider mui-group-list-group">X</li>
<li class="mui-table-view-cell mui-group-list-item">西安市</li>
<li class="mui-table-view-cell mui-group-list-item">西宁市</li>
<li class="mui-table-view-cell mui-group-list-item">西双版纳</li>
<li class="mui-table-view-cell mui-group-list-item">锡林郭勒盟</li>
<li class="mui-table-view-cell mui-group-list-item">仙桃市</li>
<li class="mui-table-view-cell mui-group-list-item">咸宁市</li>
<li class="mui-table-view-cell mui-group-list-item">咸阳市</li>
<li class="mui-table-view-cell mui-group-list-item">香港</li>
<li class="mui-table-view-cell mui-group-list-item">湘潭市</li>
<li class="mui-table-view-cell mui-group-list-item">湘西州</li>
<li class="mui-table-view-cell mui-group-list-item">襄阳市</li>
<li class="mui-table-view-cell mui-group-list-item">孝感市</li>
<li class="mui-table-view-cell mui-group-list-item">忻州市</li>
<li class="mui-table-view-cell mui-group-list-item">新乡市</li>
<li class="mui-table-view-cell mui-group-list-item">新余市</li>
<li class="mui-table-view-cell mui-group-list-item">新竹市</li>
<li class="mui-table-view-cell mui-group-list-item">信阳市</li>
<li class="mui-table-view-cell mui-group-list-item">邢台市</li>
<li class="mui-table-view-cell mui-group-list-item">兴安盟</li>
<li class="mui-table-view-cell mui-group-list-item">宿迁市</li>
<li class="mui-table-view-cell mui-group-list-item">宿州市</li>
<li class="mui-table-view-cell mui-group-list-item">徐州市</li>
<li class="mui-table-view-cell mui-group-list-item">许昌市</li>
<li class="mui-table-view-cell mui-group-list-item">宣城市</li>
<li data-group="Y" class="mui-table-view-divider mui-group-list-group">Y</li>
<li class="mui-table-view-cell mui-group-list-item">雅安市</li>
<li class="mui-table-view-cell mui-group-list-item">烟台市</li>
<li class="mui-table-view-cell mui-group-list-item">延安市</li>
<li class="mui-table-view-cell mui-group-list-item">延边州</li>
<li class="mui-table-view-cell mui-group-list-item">盐城市</li>
<li class="mui-table-view-cell mui-group-list-item">扬州市</li>
<li class="mui-table-view-cell mui-group-list-item">阳江市</li>
<li class="mui-table-view-cell mui-group-list-item">阳泉市</li>
<li class="mui-table-view-cell mui-group-list-item">伊春市</li>
<li class="mui-table-view-cell mui-group-list-item">伊犁州</li>
<li class="mui-table-view-cell mui-group-list-item">宜宾市</li>
<li class="mui-table-view-cell mui-group-list-item">宜昌市</li>
<li class="mui-table-view-cell mui-group-list-item">宜春市</li>
<li class="mui-table-view-cell mui-group-list-item">益阳市</li>
<li class="mui-table-view-cell mui-group-list-item">银川市</li>
<li class="mui-table-view-cell mui-group-list-item">鹰潭市</li>
<li class="mui-table-view-cell mui-group-list-item">营口市</li>
<li class="mui-table-view-cell mui-group-list-item">永州市</li>
<li class="mui-table-view-cell mui-group-list-item">榆林市</li>
<li class="mui-table-view-cell mui-group-list-item">玉林市</li>
<li class="mui-table-view-cell mui-group-list-item">玉树州</li>
<li class="mui-table-view-cell mui-group-list-item">玉溪市</li>
<li class="mui-table-view-cell mui-group-list-item">岳阳市</li>
<li class="mui-table-view-cell mui-group-list-item">云浮市</li>
<li class="mui-table-view-cell mui-group-list-item">运城市</li>
<li data-group="Z" class="mui-table-view-divider mui-group-list-group">Z</li>
<li class="mui-table-view-cell mui-group-list-item">枣庄市</li>
<li class="mui-table-view-cell mui-group-list-item">湛江市</li>
<li class="mui-table-view-cell mui-group-list-item">张家界市</li>
<li class="mui-table-view-cell mui-group-list-item">张家口市</li>
<li class="mui-table-view-cell mui-group-list-item">张掖市</li>
<li class="mui-table-view-cell mui-group-list-item">漳州市</li>
<li class="mui-table-view-cell mui-group-list-item">昭通市</li>
<li class="mui-table-view-cell mui-group-list-item">肇庆市</li>
<li class="mui-table-view-cell mui-group-list-item">镇江市</li>
<li class="mui-table-view-cell mui-group-list-item">郑州市</li>
<li class="mui-table-view-cell mui-group-list-item">中山市</li>
<li class="mui-table-view-cell mui-group-list-item">中卫市</li>
<li class="mui-table-view-cell mui-group-list-item">舟山市</li>
<li class="mui-table-view-cell mui-group-list-item">周口市</li>
<li class="mui-table-view-cell mui-group-list-item">珠海市</li>
<li class="mui-table-view-cell mui-group-list-item">株洲市</li>
<li class="mui-table-view-cell mui-group-list-item">驻马店市</li>
<li class="mui-table-view-cell mui-group-list-item">资阳市</li>
<li class="mui-table-view-cell mui-group-list-item">淄博市</li>
<li class="mui-table-view-cell mui-group-list-item">自贡市</li>
<li class="mui-table-view-cell mui-group-list-item">遵义市</li>
</ul>
</div>
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.indexedlist.js"></script>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
var self = plus.webview.currentWebview();
plus.geolocation.getCurrentPosition( geoInf, function ( e ) {},{geocode:true,provider:'amap'});
var header = document.querySelector('header.mui-bar');
var list = document.getElementById('list');
//calc hieght
list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
//create
window.indexedList = new mui.IndexedList(list);
//点击列表选择城市
var indexPage = self.page;//父页面传过来的pageid
var tabtopallPage = null;
mui("ul").on("tap","li", function(e) {
var tagClass = e.target.getAttribute("class");
if (tagClass && tagClass.indexOf("mui-table-view-cell") != -1) {
var selectCity = e.target.innerText;
mui.fire(plus.webview.getWebviewById(indexPage),"setCity",{city:selectCity});
}
mui.back();
});

document.getElementById("positionCity").addEventListener("tap", function(e) {
var selectCity = e.target.innerText;
mui.fire(plus.webview.getWebviewById(indexPage),"setCity",{city:selectCity});
mui.back();
});
});

function geoInf( position ) {
var codns = position.coords;//获取地理坐标信息;
var longt = codns.longitude;//获取到当前位置的经度
var lat = codns.latitude;//获取到当前位置的纬度;
//提醒:position.address 获取的是地址集合包括省市县街道等
jQuery("#positionCity").text(position.address.city);
// mui.alert(position.address.province+"=="+position.address.city+"=="+position.address.district+"--"+position.address.street);//城市、区、街道
}
</script>
</body>

</html>
0 赞 2017-11-27 22:50
大河豚

大河豚 回复 wenju

不能搜索?
0 赞 2017-09-13 09:13
蓦然mmmmm

蓦然mmmmm 回复 wenju

好的, 已经试过了。 问题解决了。
0 赞 2016-11-14 21:07
wenju

wenju 回复 蓦然mmmmm

亲 对比看看新版官方的demo哦 可能我这个mui.js比较低版本了
0 赞 2016-11-11 11:42
蓦然mmmmm

蓦然mmmmm 回复 wenju

您好, 我这边老是报这个错 Uncaught TypeError: mui.GroupList is not a constructor(…)
window.groupList = new mui.GroupList(list); 也是这段代码, 不知道什么问题。
0 赞 2016-11-11 10:45
wenju

wenju 回复 38202538@qq.com

各位亲,对比一下,最新版本的mui的css和js了 我这个毕竟是7月份写的,版本都比较低了, 看看最新官方的demo吧 这阵子比较忙,我有空再整理咯; 而且我比较建议实际项目中,还是写服务器吧,通过服务器查询,展示到前端
0 赞 2016-10-31 11:49
641366952@qq.com

641366952@qq.com 回复 wenju

这个indexof list这个有没有demo看下刚做前端
0 赞 2016-10-29 11:10
38202538@qq.com

38202538@qq.com 回复 shuaige

你怎么解决的呀,亲,我也遇到这个问题了!!
0 赞 2016-09-13 22:40
梦蝶

梦蝶

怎么城市不能选中呢
0 赞 2016-08-09 17:24
yefei1992

yefei1992

城市怎么动态加载出来呢
0 赞 2016-06-13 14:52
shuaige

shuaige

额 self.el.styleForSearch.innerText = selectorBuffer.join(', ') + "{display:none;}";这段代码我在真机上卡的时间太长,该则么优化好呢
0 赞 2015-12-22 23:03
wenju

wenju 回复 Enke

mui.fire 自定义事件http://dev.dcloud.net.cn/mui/event/#customevent
0 赞 2015-12-16 16:52
Enke

Enke

额,怎么实现选中城市后提交到另外一个页面(首页)呢?
0 赞 2015-12-16 10:31
闲云06

闲云06

拿来用了 谢谢 可能还得自己加上城市代码~~~
0 赞 2015-11-23 14:23
比恩杨

比恩杨 回复 wenju

我对移动APP开发没做过,最近公司叫我这个搞Java的做APP,啥求都不懂
0 赞 2015-09-10 16:15
wenju

wenju 回复 比恩杨

我是小白 不是大神~~~~(>_<)~~~~ 没有看到我还在问这些简单的问题哇 http://ask.dcloud.net.cn/question/10413
0 赞 2015-09-10 16:12
比恩杨

比恩杨

@wenju 大神 谢咯
0 赞 2015-09-10 16:11
wenju

wenju

@比恩杨 整理了一个案例 已上传
0 赞 2015-09-10 15:52
比恩杨

比恩杨

已确认过 CSS AND JS 路径没有问题,它报的错是: Uncaught TypeError: undefined is not a function
0 赞 2015-09-10 15:27
wenju

wenju 回复 比恩杨

检查一下 css和js路径确定对了没呢
0 赞 2015-09-10 15:25
比恩杨

比恩杨 回复 wenju

哥们 window.groupList = new mui.GroupList(list); 为什么 老是在这段代码处出错呢
0 赞 2015-09-10 15:15
wenju

wenju 回复 比恩杨

新建一个项目 选择MUI示例 在里面的js拷哦
0 赞 2015-09-10 14:43
比恩杨

比恩杨

哥们 谢咯,我知道咋回事了
0 赞 2015-09-10 14:37
比恩杨

比恩杨

大哥,给我一个DEMO 好吗,QQ:1203861350
0 赞 2015-09-10 14:27
比恩杨

比恩杨

大神,<script src="/static/css/default/img/default.jpg" data-original="../js/mui.min.js"></script>
<script src="/static/css/default/img/default.jpg" data-original="../js/mui.indexedlist.js"></script>,好像后面的js文件 没有吧
呵呵
0 赞 2015-09-10 14:20
wenju

wenju

@比恩杨 citys.html的完整hmtl代码 这个已经贴出来了
导入相关的css和js即可 大神你肯定知道的 嘿嘿
0 赞 2015-09-10 14:14
比恩杨

比恩杨

大哥 可不可以发个DEMO给我啊?THANKS
0 赞 2015-09-10 14:09
DCloud_MUI_CHB

DCloud_MUI_CHB 回复 wenju

已经帮你把话题加上了,目前已经可以在“源码技术分享”专题中看到了
0 赞 2015-07-09 21:02
DCloud_MUI_CHB

DCloud_MUI_CHB 回复 wenju

话题里填写“源码”或"技术分享"即可;
0 赞 2015-07-09 20:59
wenju

wenju 回复 DCloud_MUI_CHB

请问怎么发表到源码技术分析的专题? 我点文章的分类只看到招聘外包?
0 赞 2015-07-08 14:57
wenju

wenju 回复 DCloud_MUI_CHB

好的 我试试
0 赞 2015-07-08 14:32
DCloud_MUI_CHB

DCloud_MUI_CHB

建议上传示例源码,供大家下载学习;也欢迎提交github:https://github.com/dcloudio/casecode
0 赞 2015-07-08 13:55
蔡繁荣

蔡繁荣

顶部要是能够增加个”热门“就好了;)
0 赞 2015-07-08 13:25
wenju

wenju

写完,,睡午觉~~~~(>_<)~~~~
0 赞 2015-07-08 13:23

要回复文章请先登录注册