mui 动态绑定城市索引列表，使用vue进行绑定

梦里梦外; 2022-05-08 08:04 219阅读 0赞

效果图：

演示地址：[https://yangkejin.github.io/cityList/index.html][https_yangkejin.github.io_cityList_index.html]

![70][]

相关代码：

代码列表截图：

![70 1][]

主要代码：

index.html

<!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>
    		<script src="js/mui.min.js"></script>
    		<link href="css/mui.min.css" rel="stylesheet" />
    		<link href="css/mui.indexedlist.css" rel="stylesheet" />
    		<script src="js/ChineseToAlphabetTool.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    
    		<style type="text/css">
    			html,
    			body {
    				height: 100%;
    				overflow: hidden;
    			}
    		</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">城市选择</h1>
    			<a id='done' class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled">完成</a>
    
    		</header>
    		<div class="mui-content">
    			<div id='list' class="mui-indexed-list">
    				<div class="mui-indexed-list-search mui-input-row mui-search" style="display: none;">
    					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场"></div>
    				<div class="mui-indexed-list-bar">
    					<a v-for="item in list">{
       {item.index}}</a>
    				</div>
    				<div class="mui-indexed-list-alert"></div>
    				<div class="mui-indexed-list-inner">
    					<div class="mui-indexed-list-empty-alert">没有数据</div>
    					<ul class="mui-table-view">
    						<div v-for="item in list">
    							<li :data-group="item.index" class="mui-table-view-divider mui-indexed-list-group">{
       {item.index}}</li>
    							<li v-for="city in item.citys" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
    								<input :id="city.Code" type="checkbox" :cityCode="city.Code"/>{
       {city.Name}}</li>
    						</div>
    					</ul> 
    				</div>
    			</div>
    		</div>
    
    		<script src="js/mui.indexedlist.js" type="text/javascript" charset="utf-8"></script>
    
    		<script type="text/javascript" charset="utf-8">
    			mui.init();
    			var app = new Vue({
    				el: "#list",
    				data: {
    					list: []
    				}
    			});
    			var _this = this;
    			mui.ready(function() {
    
    				var chineseToAlphabetTool = new ChineseToAlphabetTool();
    
    				var indexs = new Array();
    				var arr = new Array(); //[{index:"a",citys:[{Nmae:"广州市"}]}];
    
    				mui.getJSON('js/city.json', null, function(data) {
    					console.log(data);
    					for(var i = 0; i < data.length; i++) {
    						var shouZM = chineseToAlphabetTool.checkCh(data[i].Name);//获取首字母
    						if(indexs.indexOf(shouZM) < 0) {
    							indexs.push(shouZM);
    						}
    					}
    					indexs.sort();//索引排序
    
    					for(var i = 0; i < indexs.length; i++) {
    						var index = indexs[i];
    						var citys = new Array();
    						for(var j = 0; j < data.length; j++) {
    							var shouZM = chineseToAlphabetTool.checkCh(data[j].Name);
    							if(index == shouZM) {
    								citys.push(data[j]);
    							}
    						}
    						arr.push({
    							"index": index,
    							"citys": citys
    						});
    					}
    					_this.app.list = arr;
    					console.log(arr);
    
    					Vue.nextTick(function() {
    						var header = document.querySelector('header.mui-bar'); 
    						var list = document.getElementById('list');
    						var done = document.getElementById('done');
    						
    						var input = document.getElementById("440100");
    						input.checked = true;
    						//calc hieght
    						list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
    						//create
    						window.indexedList = new mui.IndexedList(list);
    						//done event
    						done.addEventListener('tap', function() {
    							var checkboxArray = [].slice.call(list.querySelectorAll('input[type="checkbox"]'));
    							var checkedValues = [];
    							checkboxArray.forEach(function(box) {
    								if(box.checked) {
    									console.log(box.getAttribute("cityCode"));
    									checkedValues.push(box.parentNode.innerText);
    								}
    							});
    							if(checkedValues.length > 0) {
    								mui.alert('你选择了: ' + checkedValues);
    							} else {
    								mui.alert('你没选择任何机场');
    							}
    						}, false);
    						
    						mui('.mui-indexed-list-inner').on('change', 'input', function() {
    							var count = list.querySelectorAll('input[type="checkbox"]:checked').length;
    							var value = count ? "完成(" + count + ")" : "完成";
    							done.innerHTML = value;
    							if(count) {
    								if(done.classList.contains("mui-disabled")) {
    									done.classList.remove("mui-disabled");
    								}
    							} else {
    								if(!done.classList.contains("mui-disabled")) {
    									done.classList.add("mui-disabled");
    								}
    							}
    						});
    
    					});
    				})
    			});
    		</script>
    	</body>
    </html>

代码下载：

github：[https://github.com/yangkejin/cityList][https_github.com_yangkejin_cityList]

csdn：[https://download.csdn.net/download/dashenid/10710586][https_download.csdn.net_download_dashenid_10710586]

[https_yangkejin.github.io_cityList_index.html]: https://yangkejin.github.io/cityList/index.html
[70]: /images/20220508/21f4bf6de33e48d8a42711904f45510c.png
[70 1]: /images/20220508/fd06c5f76f444c5b9eb1743382a9074b.png
[https_github.com_yangkejin_cityList]: https://github.com/yangkejin/cityList
[https_download.csdn.net_download_dashenid_10710586]: https://download.csdn.net/download/dashenid/10710586