在我们常见的手机通讯录或微信通讯录中，联系方式是按字母顺序排列的列表。通过点击右边的字母，对应于第一个字母的联系人将被快速定位和检索。所以我今天要给大家介绍的是通过首字母快速定位城市列表，和通讯录的效果一样。

查看演示下载源代码准备

查看演示下载源代码

准备

首先，我们需要使用全国的城市数据，这些数据来自网络。我已经把数据格式化成JSON格式，大家都可以直接使用。

我们还需要使用一个叫做better-scroll的滚动插件，可以帮助我们摆脱超长页面原有的滚动条，优化滚动效果。

然后我们准备HTML结构。

div class=' city ' div class=' city-wrapper city-wrapper-hook ' div class=' scroller-hook ' div class=' cities city-hook '/div/div div class='快捷键-hook '/div/div . cities用于加载城市数据列表。快捷方式用于加载首字母列表，需要通过CSS定位在右侧。

java描述语言

在编写JS代码之前，先加载城市数据city.js和better-scroll。

script src=' http : js/bscroll . min . js '/script script src=' http 3360 js/city . js '/script开始编写js，首先定义要使用的变量：

var city wrapper=document . queryselector('。城市包装钩')；var city scroller=document . query selector('。scroller-hook’)；var city=document . queryselector('。city-hook’)；var快捷键=document.querySelector('。快捷键-hook’)；var滚动；var short cutlist=[]；var anchorMap={ }；函数initCities()循环遍历city.js中的城市数据，提取城市名称、首字母和id信息，并一次性将其添加到数据列表中。然后调用BScroll插件方法。

函数init cities(){ var y=0；var titleHeight=28var itemHeight=44var lists=var en=' ulcityData.forEach(函数(组){ var name=group.namelist=' div class=' title ' ' name '/div '；列表=' ulgroup.cities.forEach(函数(g){ list=' Li class=' item ' data-name=' g . name ' ' data-id=' g . city id ' ' span class=' border-1px name ' ' g . name '/span/Li '；});list='/ul '；var name=group.name.substr(0，1)；en=' Li data-anchor=' name ' ' class=' item ' ' name '/Li '；var len=group . cities . length；anchorMap[name]=y；y-=title height len * item height；});en='/ul '；cities.innerHTML=lists快捷键. innerhtml=en；快捷键. style . top=(city wrapper . client height-快捷键. client height)/2 ' px '；Scroll=new window . b scroll(city wrapper，{probe type: 3//1)将被拦截，并且在滚动结束时只调度一个scroll事件。2当手指移动时，滚动事件会实时调度，不会被拦截。3除了在手指移动时调度滚动事件，在滑动的情况下(手指快速滑动一小段距离)，列表会有一个长距离的滚动动画，在这个滚动动画过程中会实时调度滚动事件})；scroll.scrollTo(0，0)；}然后函数bindEvent()绑定事件，并监听带有正确首字母的touchstart和touchmove事件。

函数bindEvent(){ var touch={ }；var firstTouch快捷键。addEventListener('touchstart '，函数{ var anchor=e . target。getattribute(' data-anchor ')；第一次触摸=e . Touchs[0]；触摸。y1=第一次触摸。佩吉；touch.anchor=锚；scrollTo(锚);});快捷键。addEventListener('touchmove '，函数{首次触摸=e . Touch[0]；触摸。y2=首次触摸。佩吉；var anchorHeight=16var delta=(触摸。y2-触摸。y1)/锚点高度| 0；var anchor=短说明列表[短说明列表。indexof(触摸。锚定)]；scrollTo(锚);e . PreventDefault()；e . stopperpagation()；});函数滚动到(锚点){ var maxScrollY=城市包装器。客户身高-城市滚动。客户身高；var y=Math.min(0，Math.max(maxScrollY，anchorMap[anchor])；如果(类型为y！=='未定义'){滚动。滚动到(0，y)；} } }最后调用执行两个函数。

initCities()；bindEvent()；现在使用手机或平板访问就可以看到效果了，如果你要实现的是通讯录效果，可以将联系人数据信息格式化成city.js中对应的json即可。

以上所述是小编给大家介绍的射流研究…实现移动端按首字母检索城市列表，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！