JS实现移动端按首字母检索城市列表实例内容

  • 更新时间:2020-03-08 21:11:37
  • 编辑:逯乐心
我们帮大家精选了javascript相关的编程文章,网友林鹏运根据主题投稿了本篇教程内容,涉及到js、首字母检索、JS实现移动端按首字母检索城市列表附源码下载相关内容,已被486网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。
  • Node.js进阶之路 / 42 MB 推荐度:
  • 《AngularJS实战》源代码 / 1.9 MB 推荐度:
  • AngularJS实战 / 62.21 MB 推荐度:
  • 微信公众平台JSSDK开发实战:公众号与HTML5混合模式揭秘 / 113 MB 推荐度:
  • Node.js:来一打(C++ 扩展) / 146 MB 推荐度:
  • JS实现移动端按首字母检索城市列表附源码下载

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

    JS实现移动端按首字母检索城市列表附源码下载 查看演示 下载源码 准备

    查看演示     下载源码

    准备

    首先我们需要用到全国的城市数据,这些城市数据来源于网络,我已经将数据格式化成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(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实现移动端按首字母检索城市列表,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

    javascript相关教程

    • 详谈commonjs模块与es6模块的区别

      下面小编就为大家带来一篇详谈commonjs模块与es6模块的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      发布时间:2019-06-21

    • Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件

      这篇文章主要介绍了Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

      发布时间:2019-07-23

    用户留言