JS实现移动端按首字母检索城市列表附源码下载

前端之家收集整理的这篇文章主要介绍了JS实现移动端按首字母检索城市列表附源码下载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们常见的手机通讯录或微信通讯录,联系人信息是按字母顺序排列的列表,通过点击右侧的字母,会迅速定位检索到首字母对应的联系人。那么我今天给大家介绍的是按首字母快速定位到城市列表,效果和通讯录一样的。

准备

首先我们需要用到全国的城市数据,这些城市数据来源于网络,我已经将数据格式化成JSON形式了,大家可以直接拿去用。

我们还需要用到一个叫better-scroll的滚动插件,它能帮我们将超长的页面原生的滚动条处理掉,优化滚动效果

接着我们准备HTML结构。

.cities是用来装载城市数据列表的;.shortcut是用来装载首字母列表的,需要使用CSS将其定位在右边侧。

Javascript

写JS代码之前,先将城市数据city.js和better-scroll加载进来。

猜你在找的JavaScript相关文章