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

准备

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

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

接着我们准备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

写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 +\'">\';
      lists += \'<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即可。

下载附件citylist.rar( 16.6K )

本文地址：https://www.stayed.cn/item/31

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我