手机端按首字母检索城市的js插件

本插件实现了类似于手机通讯录效果的，联系人信息是按字母顺序排列的列表，通过点击右侧的字母，会迅速定位检索到首字母对应的联系人。只不过本插件是通过首字母检索城市的js插件（您可以修改city.js，增删改里面的检索内容）。此外，本插件是基于better-scroll插件实现的滑动效果。
1、引入相关的css

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/city.css">

2、准备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>

3、引入js和初始化插件

<script src="js/bscroll.min.js"></script>
<script src="js/city.js"></script>
<script>
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 = {};

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
  });
  // scroll.on('scroll', function (pos) {
  //   console.log(Math.round(pos.y));
  // });
  scroll.scrollTo(0, 0);
}

//bind Event
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();
</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！