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> <!-- <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="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-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 listIndex"> <a >热</a> <a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a<