本文介绍如何使用JavaScript和better-scroll插件在移动端实现类似通讯录的城市列表按首字母快速检索功能。通过加载城市数据，利用CSS定位右侧字母导航，并绑定touch事件监听用户滑动，实现高效的城市定位与滚动体验。
移动端城市列表按首字母检索实现
常见的手机通讯录或微信通讯录中，联系人信息通常按字母顺序排列，用户点击右侧字母即可快速定位到对应首字母的联系人。本文将介绍如何实现类似效果的城市列表检索功能，让用户能迅速定位到目标城市。
查看演示 下载源码 准备
查看演示 下载源码
准备工作
准备
首先，我们需要获取全国城市数据。这些数据来源于网络，作者已将其格式化为JSON格式，用户可以直接使用。
此外，我们需要引入一个名为better-scroll的滚动插件。该插件能够处理超长页面的原生滚动条，优化滚动效果。
HTML结构准备
接下来，准备HTML结构。
<div class="city">
<div class="city-wrapper city-wrapper-hook">
<div class="scroller-hook">
<div class="cities cities-hook"></div>
</div>
<div class="shortcut shortcut-hook"></div>
</div>
</div> .cities类用于装载城市数据列表；.shortcut类用于装载首字母列表，需使用CSS将其定位在右侧。
JavaScript代码实现
Javascript
在编写JS代码之前，先加载城市数据city.js和better-scroll插件。
<script src="js/bscroll.min.js"> </script>
<script src="js/city.js"> </script>开始编写JS代码，首先定义所需变量：
var cityWrapper = document.querySelector('.city-wrapper-hook');
var cityScroller = document.querySelector('.scroller-hook');
var cities = document.querySelector('.cities-hook');
var shortcut = document.querySelector('.shortcut-hook');
var scroll;
var shortcutList = [];
var anchorMap = {};函数initCities()循环遍历city.js中的城市数据，提取城市名称、首字母和id信息，并一次性添加到数据列表中。随后调用BScroll插件方法。
function initCities() {
var y = 0;
var titleHeight = 28;
var itemHeight = 44;
var lists = '';
var en = '<ul>';
cityData.forEach(function (group) {
var name = group.name;
lists += '<div class="title">'+name+'</div>';
lists += '<ul>';
group.cities.forEach(function(g) {
lists += '<li class="item" data-name="'+ g.name +'" data-id="'+ g.cityid +'"><span class="border-1px name">'+ g.name +'</span></li>';
});
lists += '</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 -= titleHeight + len * itemHeight;
});
en += '</ul>';
cities.innerHTML = lists;
shortcut.innerHTML = en;
shortcut.style.top = (cityWrapper.clientHeight - shortcut.clientHeight) / 2 + 'px';
scroll = new window.BScroll(cityWrapper, {
probeType: 3 //1 会截流,只有在滚动结束的时候派发一个 scroll 事件。2在手指 move 的时候也会实时派发 scroll 事件，不会截流。 3除了手指 move 的时候派发scroll事件，在 swipe（手指迅速滑动一小段距离）的情况下，列表会有一个长距离的滚动动画，这个滚动的动画过程中也会实时派发滚动事件
});
scroll.scrollTo(0, 0);
}然后，函数bindEvent()绑定事件，监听右侧首字母的touchstart和touchmove事件。
function bindEvent() {
var touch = {};
var firstTouch;
shortcut.addEventListener('touchstart', function (e) {
var anchor = e.target.getAttribute('data-anchor');
firstTouch = e.touches[0];
touch.y1 = firstTouch.pageY;
touch.anchor = anchor;
scrollTo(anchor);
});
shortcut.addEventListener('touchmove', function (e) {
firstTouch = e.touches[0];
touch.y2 = firstTouch.pageY;
var anchorHeight = 16;
var delta = (touch.y2 - touch.y1) / anchorHeight | 0;
var anchor = shortcutList[shortcutList.indexOf(touch.anchor) + delta];
scrollTo(anchor);
e.preventDefault();
e.stopPropagation();
});
function scrollTo(anchor) {
var maxScrollY = cityWrapper.clientHeight - cityScroller.clientHeight;
var y = Math.min(0, Math.max(maxScrollY, anchorMap[anchor]));
if (typeof y !== 'undefined') {
scroll.scrollTo(0, y);
}
}
}最后，调用并执行这两个函数。
initCities();
bindEvent();现在，使用手机或平板访问即可看到效果。如果需要实现通讯录效果，只需将联系人数据格式化为city.js中对应的JSON格式即可。
以上所述是小编给大家介绍的JS实现移动端按首字母检索城市列表，希望对大家有所帮助。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！