快捷導(dǎo)航

JS實(shí)現(xiàn)移動端按首字母檢索城市列表附源碼下載

更新時間：2017年07月05日 15:18:42 作者：月光光

我們常見的手機(jī)通訊錄或微信通訊錄，聯(lián)系人信息是按字母順序排列的列表，通過點(diǎn)擊右側(cè)的字母，會迅速定位檢索到首字母對應(yīng)的聯(lián)系人。下面通過本文給大家分享JS實(shí)現(xiàn)移動端按首字母檢索城市列表功能，需要的的朋友參考下吧

我們常見的手機(jī)通訊錄或微信通訊錄，聯(lián)系人信息是按字母順序排列的列表，通過點(diǎn)擊右側(cè)的字母，會迅速定位檢索到首字母對應(yīng)的聯(lián)系人。那么我今天給大家介紹的是按首字母快速定位到城市列表，效果和通訊錄一樣的。

查看演示下載源碼準(zhǔn)備

查看演示下載源碼

準(zhǔn)備

首先我們需要用到全國的城市數(shù)據(jù)，這些城市數(shù)據(jù)來源于網(wǎng)絡(luò)，我已經(jīng)將數(shù)據(jù)格式化成JSON形式了，大家可以直接拿去用。

我們還需要用到一個叫better-scroll的滾動插件，它能幫我們將超長的頁面原生的滾動條處理掉，優(yōu)化滾動效果。

接著我們準(zhǔn)備HTML結(jié)構(gòu)。

<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是用來裝載城市數(shù)據(jù)列表的；.shortcut是用來裝載首字母列表的，需要使用CSS將其定位在右邊側(cè)。

Javascript

寫JS代碼之前，先將城市數(shù)據(jù)city.js和better-scroll加載進(jìn)來。

<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 = {};

函數(shù)initCities()循環(huán)遍歷city.js中的城市數(shù)據(jù)，提取其中的城市名稱、首字母和id信息，一次性加入到數(shù)據(jù)列表中。接著調(diào)用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 會截流,只有在滾動結(jié)束的時候派發(fā)一個 scroll 事件。2在手指 move 的時候也會實(shí)時派發(fā) scroll 事件，不會截流。 3除了手指 move 的時候派發(fā)scroll事件，在 swipe（手指迅速滑動一小段距離）的情況下，列表會有一個長距離的滾動動畫，這個滾動的動畫過程中也會實(shí)時派發(fā)滾動事件 
 }); 
 scroll.scrollTo(0, 0); 
}

然后函數(shù)bindEvent()綁定事件，監(jiān)聽右側(cè)首字母的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); 
 } 
 } 
}

最后調(diào)用執(zhí)行兩個函數(shù)。