mui的索引列表插件-增加热门城市

xiaoxiao2021-03-25 151

mui的索引列表插件的使用：动态数据绑定以及顶部搜索并增加热门城市

页面中需要引入的文件。搜索框的样式移动到了header部分了。搜索框搜索完内容之后再点击清除按钮，然后点击字母索引会出现列表卡顿现象，请参照js里边注释的两行。搜索过内容清空后，会出现点击索引搜索时，搜索框一直聚焦，大家可自行进一步修改。并且搜索框的搜索只显示有数据的列表。希望大家进一步优化。有问题请指正。由于数据不是特别多，点击字母索引会出现不能定位到上边的情况，请查看数据列表是不是已经到头。如果本页已经显示到最底部的数据，就不会再定位了。 <script src="../js/rem.js"></script> rem控制响应式 <link rel="stylesheet" type="text/css" href="../css/reset.css"> 初始化样式，可自己定义 <link rel="stylesheet" type="text/css" href="../css/mui.min.css"> <link rel="stylesheet" type="text/css" href="../css/mui.indexedlist.css"/> <link rel="stylesheet" type="text/css" href="../css/city.css"/> <script src="../js/jquery.min.js"></script> <script src="../js/mui.min.js"></script> <script src="../js/mui.indexedlist.js"></script>----》请参考如下js

首先是html部分

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <title> 城市 </title> <script src="../js/rem.js"></script> <link rel="stylesheet" type="text/css" href="../css/reset.css"> <link rel="stylesheet" type="text/css" href="../css/mui.min.css"> <link rel="stylesheet" type="text/css" href="../css/mui.indexedlist.css"/> <link rel="stylesheet" type="text/css" href="../css/city.css"/> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <div class="mui-indexed-list-search mui-input-row mui-search search_title"> <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="北京/beijing/bj/bjs/中国" style="border-radius: 6px"> </div>  </header> <div class="mui-content"> <div id="slider" class="mui-slider"> <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="background-color: #fff"> <a class="mui-control-item" href="#item1mobile"> 国内 </a> <a class="mui-control-item" href="#item2mobile" id="national"> 国际 </a> </div> <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div> <div class="mui-slider-group"> <div id="item1mobile" class="mui-slider-item mui-control-content mui-active"> <div id='list' class="mui-indexed-list" >  <div class="mui-indexed-list-bar listIndex"> <a >热</a> <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 class="mui-table-view" id="cityList"> <li data-group="热" class="mui-table-view-divider mui-indexed-list-group" id="hot">热门</li> <li data-group="A" class="mui-table-view-divider mui-indexed-list-group" id="A">A</li> <li data-group="B" class="mui-table-view-divider mui-indexed-list-group" id="B">B</li> <li data-group="C" class="mui-table-view-divider mui-indexed-list-group" id="C">C</li> <li data-group="D" class="mui-table-view-divider mui-indexed-list-group" id="D">D</li> <li data-group="E" class="mui-table-view-divider mui-indexed-list-group" id="E">E</li> <li data-group="F" class="mui-table-view-divider mui-indexed-list-group" id="F">F</li> <li data-group="G" class="mui-table-view-divider mui-indexed-list-group" id="G">G</li> <li data-group="H" class="mui-table-view-divider mui-indexed-list-group" id="H">H</li> <li data-group="J" class="mui-table-view-divider mui-indexed-list-group" id="J">J</li> <li data-group="K" class="mui-table-view-divider mui-indexed-list-group" id="K">K</li> <li data-group="L" class="mui-table-view-divider mui-indexed-list-group" id="L">L</li> <li data-group="M" class="mui-table-view-divider mui-indexed-list-group" id="M">M</li> <li data-group="N" class="mui-table-view-divider mui-indexed-list-group" id="N">N</li> <li data-group="P" class="mui-table-view-divider mui-indexed-list-group" id="P">P</li> <li data-group="Q" class="mui-table-view-divider mui-indexed-list-group" id="Q">Q</li> <li data-group="R" class="mui-table-view-divider mui-indexed-list-group" id="R">R</li> <li data-group="S" class="mui-table-view-divider mui-indexed-list-group" id="S">S</li> <li data-group="T" class="mui-table-view-divider mui-indexed-list-group" id="T">T</li> <li data-group="W" class="mui-table-view-divider mui-indexed-list-group" id="W">W</li> <li data-group="X" class="mui-table-view-divider mui-indexed-list-group" id="X">X</li> <li data-group="Y" class="mui-table-view-divider mui-indexed-list-group" id="Y">Y</li> <li data-group="Z" class="mui-table-view-divider mui-indexed-list-group" id="Z">Z</li> </ul> </div> </div> </div> </div> </div> </div> <script src="../js/jquery.min.js"></script> <script src="../js/mui.min.js"></script> <script src="../js/mui.indexedlist.js"></script> <script type="text/javascript" charset="utf-8"> mui.init(); function alertCode(obj){ alert($(obj).attr("code")) } getHistoryList(); /*加载热门城市列表*/ function getHistoryList(){ var listHot=$("#hot"); var str=''; $.getJSON("../json/hot.json",function(data){ $.each(data,function(index,item){ str+='<li class=" hot_class" code="'+item.code+'"><span>'+item.name+'</span></li>'; }); str+="<li class='clear'></li>"; listHot.after(str); /*点击热门城市颜色改变*/ $("li.hot_class").click(function(){ $("li.hot_class").removeClass("on"); $(this).addClass("on"); alert($(this).attr("code")) }); }); } $(function getCityList(){ $.getJSON("../json/city.json",function(data){ $.each(data,function(index,item){ // console.log(index,item) var datas=item; var name=index; var str=''; $.each(datas,function(index,item){ console.log(index,item) str+='<li data-value="'+item.url+'" class="mui-table-view-cell mui-indexed-list-item" code="'+item.code+'" οnclick="alertCode(this)">'+item.name+' </li>'; }); $("#"+name).after(str); }); mui.ready(function () { 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); }); }); }); /*点击国际弹出提示语*/ document.getElementById("national").addEventListener('tap', function() { mui.alert('', '开发中，敬请期待'); }); </script> </body> </html>

city.css部分

/* * 城市选择样式 * varstion 1.0.0 * by Liuerna */ html, body { height: 100%; overflow: hidden; } body { font: 12px/1.5 "Microsoft Yahei", SimSun, arial, sans-serif; color: #666; line-height: 100%; } .mui-bar { -webkit-box-shadow: none; box-shadow: none; } #done.mui-disabled{ color: gray; } .search_title{ position: absolute; left: 40px; border-bottom: none; width: 82%; } .city_historyChose,.city_hot{ padding-left: 15px; position: relative; height: 40px; line-height: 40px; font-size: 0.26rem; } .line{ position: absolute; width: 100%; height:1px; background-color: #b5b5b6; top: 50%; } .historyList{ padding-left: 15px; width: 100%; height: auto; overflow: hidden; } .historyList span{ float: left; line-height: 0.4rem; padding:5px 28px; background-color: #fff; border-radius: 6px; color: #000; margin-right: 10px; margin-bottom: 10px; font-size: 0.28rem; width: 2rem; } .historyList li.on{ color: #007aff; } .listIndex{ background-color: white; } .listIndex a{ color: #1491c5; font-size: 0.28rem; line-height: 0.44rem; } .hot_class{ display: inline-block; line-height: 0.4rem; padding:5px 28px; background-color: #f7f7f7; border-radius: 6px; color: #000; /* margin-right: 10px; margin-bottom: 10px;*/ margin: 5px ; font-size: 0.28rem; width: 2.1rem; text-align: center; list-style: none; } .on{ color: #007aff; } .clear{ clear: both; list-style: none; } .hot_class.on{ color: #007aff; }

IndexedList.js

/** * IndexedList * 类似联系人应用中的联系人列表，可以按首字母分组 * 右侧的字母定位工具条，可以快速定位列表位置 * varstion 1.0.0 * by Houfeng * Houfeng@DCloud.io **/ (function($, window, document) { var classSelector = function(name) { return '.' + $.className(name); } var IndexedList = $.IndexedList = $.Class.extend({ /** * 通过 element 和 options 构造 IndexedList 实例 **/ init: function(holder, options) { var self = this; self.options = options || {}; self.box = holder; if (!self.box) { throw "实例 IndexedList 时需要指定 element"; } self.createDom(); self.findElements(); self.caleLayout(); self.bindEvent(); }, createDom: function() { var self = this; self.el = self.el || {}; //styleForSearch 用于搜索，此方式能在数据较多时获取很好的性能 self.el.styleForSearch = document.createElement('style'); (document.head || document.body).appendChild(self.el.styleForSearch); }, findElements: function() { var self = this; self.el = self.el || {}; self.el.search = document.querySelector(classSelector('indexed-list-search')); self.el.searchInput = document.querySelector(classSelector('indexed-list-search-input')); self.el.searchClear = document.querySelector(classSelector('indexed-list-search') + ' ' + classSelector('icon-clear')); self.el.bar = self.box.querySelector(classSelector('indexed-list-bar')); self.el.barItems = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-bar') + ' a')); self.el.inner = self.box.querySelector(classSelector('indexed-list-inner')); self.el.items = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-item'))); self.el.liArray = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-inner') + ' li')); self.el.alert = self.box.querySelector(classSelector('indexed-list-alert')); }, caleLayout: function() { var self = this; var withoutSearchHeight = (self.box.offsetHeight) + 'px'; self.el.bar.style.height = withoutSearchHeight; self.el.inner.style.height = withoutSearchHeight; var barItemHeight = ((self.el.bar.offsetHeight - 40) / self.el.barItems.length) + 'px'; self.el.barItems.forEach(function(item) { item.style.height = barItemHeight; item.style.lineHeight = barItemHeight; }); }, scrollTo: function(group) { var self = this; var groupElement = self.el.inner.querySelector('[data-group="' + group + '"]'); if (!groupElement || (self.hiddenGroups && self.hiddenGroups.indexOf(groupElement) > -1)) { return; } self.el.inner.scrollTop = groupElement.offsetTop; }, bindBarEvent: function() { var self = this; var pointElement = null; var findStart = function(event) { if (pointElement) { pointElement.classList.remove('active'); pointElement = null; } self.el.bar.classList.add('active'); var point = event.changedTouches ? event.changedTouches[0] : event; pointElement = document.elementFromPoint(point.pageX, point.pageY); if (pointElement) { var group = pointElement.innerText; if (group && group.length == 1) { pointElement.classList.add('active'); self.el.alert.innerText = group; self.el.alert.classList.add('active'); self.scrollTo(group); } } event.preventDefault(); }; var findEnd = function(event) { self.el.alert.classList.remove('active'); self.el.bar.classList.remove('active'); if (pointElement) { pointElement.classList.remove('active'); pointElement = null; } }; self.el.bar.addEventListener($.EVENT_MOVE, function(event) { findStart(event); }, false); self.el.bar.addEventListener($.EVENT_START, function(event) { findStart(event); }, false); document.body.addEventListener($.EVENT_END, function(event) { findEnd(event); }, false); document.body.addEventListener($.EVENT_CANCEL, function(event) { findEnd(event); }, false); }, search: function(keyword) { var self = this; keyword = (keyword || '').toLowerCase(); var selectorBuffer = []; var groupIndex = -1; var itemCount = 0; var liArray = self.el.liArray; var itemTotal = liArray.length; self.hiddenGroups = []; var checkGroup = function(currentIndex, last) { if (itemCount >= currentIndex - groupIndex - (last ? 0 : 1)) { selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (groupIndex + 1) + ')'); self.hiddenGroups.push(liArray[groupIndex]); }; groupIndex = currentIndex; itemCount = 0; } liArray.forEach(function(item) { var currentIndex = liArray.indexOf(item); if (item.classList.contains($.className('indexed-list-group'))) { checkGroup(currentIndex, false); } else { var text = (item.innerText || '').toLowerCase(); var value = (item.getAttribute('data-value') || '').toLowerCase(); var tags = (item.getAttribute('data-tags') || '').toLowerCase(); if (keyword && text.indexOf(keyword) < 0 && value.indexOf(keyword) < 0 && tags.indexOf(keyword) < 0) { selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (currentIndex + 1) + ')'); itemCount++; } if (currentIndex >= itemTotal - 1) { checkGroup(currentIndex, true); } } }); if (selectorBuffer.length >= itemTotal) { self.el.inner.classList.add('empty'); } else if (selectorBuffer.length > 0) { self.el.inner.classList.remove('empty'); self.el.styleForSearch.innerText = selectorBuffer.join(', ') + "{display:none;}"; } else { self.el.inner.classList.remove('empty'); self.el.styleForSearch.innerText = ""; } }, bindSearchEvent: function() { var self = this; self.el.searchInput.addEventListener('input', function() { var keyword = this.value; self.search(keyword); }, false); $(self.el.search).on('tap', classSelector('icon-clear'), function() { self.search(''); }, false); }, bindEvent: function() { var self = this; self.bindBarEvent(); self.bindSearchEvent(); } }); //mui(selector).indexedList 方式 $.fn.indexedList = function(options) { //遍历选择的元素 this.each(function(i, element) { if (element.indexedList) return; element.indexedList = new IndexedList(element, options); }); return this[0] ? this[0].indexedList : null; }; })(mui, window, document);

city.json

{ "A": [ { "name": "阿克苏机场", "url": "AKeSu", "code":"1" }, { "name": "阿克苏机场", "url": "AKeSu", "code":"1" }, { "name": "阿克苏机场", "url": "AKeSu", "code":"1" }, { "name": "阿克苏机场", "url": "AKeSu", "code":"1" }, { "name": "阿克苏机场", "url": "AKeSu", "code":"1" }, { "name": "阿克苏机场", "url": "AKeSu", "code":"1" }, { "name": "阿克苏机场", "url": "AKeSu", "code":"1" }, { "name": "阿克苏机场", "url": "AKeSu", "code":"1" }, { "name": "阿拉山口", "url": "ALaShanKou'", "code":"1" }, { "name": "澳门国际机场", "url": "AoMenGuoJI", "code":"2" } ], "B": [ { "name": "包头机场", "url": "BaoTou", "code":"3" }, { "name": "包头机场", "url": "BaoTou", "code":"3" }, { "name": "包头机场", "url": "BaoTou", "code":"3" }, { "name": "包头机场", "url": "BaoTou", "code":"3" }, { "name": "包头机场", "url": "BaoTou", "code":"3" }, { "name": "包头机场", "url": "BaoTou", "code":"3" }, { "name": "包头机场", "url": "BaoTou", "code":"3" } ], "C": [ { "name": "长白山机场", "url": "ChangBaiShan", "code":"4" } ], "D": [ { "name": "大理机场", "url": "DaLi", "code":"5" } ], "E": [ { "name": "鄂尔多斯机场", "url": "ErErDuoSi", "code":"6" } ], "F": [ { "name": "阜阳西关机场", "url": "FuYangXiGuan", "code":"7" } ], "G": [ { "name": "格尔木机场", "url": "GeErMu", "code":"8" } ] , "H": [ { "name": "哈尔滨太平国际机场", "url": "HaErBinTaiPingGuoJi", "code":"9" } ] }

hot.json

[ { "name": "北京", "code":"1" }, { "name": "上海", "code":"2" }, { "name": "广州", "code":"3" }, { "name": "深圳", "code":"4" }, { "name": "香港", "code":"5" }, { "name": "杭州", "code":"6" }, { "name": "武汉", "code":"7" }, { "name": "西安", "code":"8" }, { "name": "重庆", "code":"9" }, { "name": "青岛", "code":"10" }, { "name": "长沙", "code":"11" }, { "name": "南京", "code":"12" }, { "name": "厦门", "code":"13" }, { "name": "昆明", "code":"14" }, { "name": "大连", "code":"15" }, { "name": "天津", "code":"16" }, { "name": "郑州", "code":"17" }, { "name": "三亚", "code":"18" }, { "name": "济南", "code":"19" }, { "name": "福州", "code":"20" }, { "name": "澳门", "code":"21" } ]

转载请注明原文地址: https://ju.6miu.com/read-12027.html

技术

最新回复(0)