首页 新闻 HTML5/移动WEB应用 HTML5移动端按首字母检索城市列表的实现方法

HTML5移动端按首字母检索城市列表的实现方法

QKEPHP官方
2017-06-29 16:35
5159

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

准备

首先我们需要用到全国的城市数据,这些城市数据来源于网络,我已经将数据格式化成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 +'"><span class="border-1px name">'+ g.name +'</span></li>'
    }); 
    lists += '</ul>'
 
 
    var name = group.name.substr(01); 
    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(00); 
}

然后函数bindEvent()绑定事件,监听右侧首字母的touchstarttouchmove事件。

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(0Math.max(maxScrollY, anchorMap[anchor])); 
 
    if (typeof y !== 'undefined'{ 
      scroll.scrollTo(0, y); 
    } 
  } 
}

最后调用执行两个函数。

initCities(); 
bindEvent();

现在使用手机或平板访问就可以看到效果了,如果你要实现的是通讯录效果,可以将联系人数据信息格式化成city.js中对应的json即可。


标签:

声明:本文为原创文章,和作者拥有版权,如需转载,请注明来源于并保留原文链接:http://qkephp.com/news/detail_5.html

0评论
  • 全部评论
请先后发表评论 (・ω・)

专属顾问

可根据你的需求
提供版本建议