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

  • 时间:
  • 4438人关注

我们常见的手机通讯录或微信通讯录,联系人信息是按字母顺序排列的列表,通过点击右侧的字母,会迅速定位检索到首字母对应的联系人。下面通过本文给大家分享JS实现移动端按首字母检索,另外这篇文章主要知识点是关于js、首字母检索、javascript的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:javascript
  • 编辑整理:冉宛妙
  • 教程字数:2957字节
  • 阅读时间:大概8分钟
  • 下载本教程(DOC版)
  • 《Vue.js前端开发基础与项目实战》项目源码
  • JSON-handle
  • Quick Javascript Switcher
  • Vue.js devtools
  • JSON Formatter
  • 我们常见的手机通讯录或微信通讯录,联系人信息是按字母顺序排列的列表,通过点击右侧的字母,会迅速定位检索到首字母对应的联系人。那么我今天给大家介绍的是按首字母快速定位到城市列表,效果和通讯录一样的。

    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实现移动端按首字母检索城市列表,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!


    上一篇:canvas实现图片根据滑块放大缩小的代码

    下一篇:JavaScript实现单击网页任意位置打开关闭窗口的代码

    相关内容

    • java与jsp的区别

      java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。 JSP和JAVA的区别,JSP算是JAVA一种技术吧,用在网页编程上,因为JAVA不能直接写在html上,但jsp能,jsp就是Servlet程序,当JSP收到客户的请求时,SCRIPTLET(脚本小程序)就会被执行,脚本段将被插入到JSP所生成的目标Servlet的Serivce函数中.所以脚本小程序不能写方法(函数),因为方法里面不能再有方法了.JSP的执行过程。 1、首先,JAVA是一门

      12-17JSP和JAVA的区别

      阅读更多
    • js可以替代java吗

      nodejs不会替代java。在虚拟机层面 node.js 基于的v8 VM看起来很不错,但和Java的 VM 一比,差距甚远。在服务器领域,特别是拥有众多 CPU 和大量内存的环境下,Java 的 VM 几乎是你能在地球上找到的最好的 VM。而v8既不能充分利用多CPU的性能,也不能将内存充分利用。Node.js是从前端转过来的,恰恰前端是计算机领域少数几个不需要计算机体系知识就能胜任的职业。想要真正做到像java那样水平,计算机体系性的知识必不可少。Node.js特别适合中小型系统的快速开

      12-13js能替代java吗

      阅读更多
    • JAVA直接访问jsp页面报404吗

      404表示的是路径未找到错误,解决办法如下: 【解决方法】 1、首先看错误信息 第一行 2、这里有出错的路径,也就是哪个找不到的路径 3、然后回程序中找调用这个路径的地方,确定路径写的是否正确,是否可达。 JSP页面运行时报的404错处理方法如下: 保证在你的Console窗口中看不到任何起到影响的Exception(jsp在编译的时候会先检查web.xml文件,如果全部正常,没有任何Exception的话,才会成功部署到.metadata\.plugins\org.eclipse.wst.server.

      12-12JAVA访问jsp页面报404吗

      阅读更多
    • jsp实质是java程序对吗

      JSP页面在本质上就是Servlet程序,当JSP页面在首次被访问时,Web容器就会将JSP页面转化为Servlet,只需要做一次。如index.jsp在首次被访问时,Web容器会将其翻译成一个index_jsp.java文件,即Servlet代码。 JSP是服务器端的一种基于java语言的网页技术,它是由一些JSP标记,java程序段以及HTML文件组成的结合体,以java语言作为其内置的脚本语言。实质上是通过调用JSP引擎来生成java文件,再将这个java文件编译成类文件,并执行这个类文件以生成动态

      12-05jsp实质是java程序吗

      阅读更多
    • jsp文件就是java文件吗

      jsp文件不是java文件,java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。jsp是一个网页页面,相当于复杂的html。其中可以插入script代码,当然也可以插入java代码。j ava是一个类文件,在java学习初期主要是写java文件的。如果不写页面的话是没有页面效果的。 1、JSP的写的代码,不利于代码重用。JAVA本来就是面向对象的语言,但在JSP中,体现不出来代码重用的优势。如果把一些通用的代码写成JAVA文件,就方便了很多,例

      12-02jsp文件是java文件吗

      阅读更多
    • JavaScript DOM编程艺术

      JavaScript DOM编程艺术

      非常畅销书全新升级,首版销售量确保。 书中详细说明开发Web运用的基石W3C的DOM标准,由提倡Web标准的大神领军人物执笔用心编写,表明了前端工程师的人生真谛,是学习培训JavaScript和DOM开发

      大小:109.2 MBJavaScript

      点击下载
    • JavaScript语言精粹

      JavaScript语言精粹

      JavaScript曾是全世界非常容易误解的言语,由于它肩负过多的特点,包含槽糕的互动和不成功的设计方案,但伴随着Ajax的来临,JavaScript从极受误会的程序语言演化为十分时髦的言语,这除开好

      大小:9.9 MBJavaScript

      点击下载
    • JavaScript之美

      JavaScript之美

      阅读文章这书好像是坐着来与一些JavaScript大师共进午餐,听她们探讨她们现场不断涌现出去的新念头。JavaScript能够说成全世界*异议和别人误会*多的程序语言。许多人企图用别的语言替代它的

      大小:94 MBJavaScript

      点击下载
    • JavaScript高级程序设计

      JavaScript高级程序设计

      《 JavaScript高級编程设计(第3版) 》是JavaScript超級畅销书的*版。ECMAScript5和HTML5在规范之战中同时获胜,使很多特有保持和手机客户端拓展宣布进到标准,另外也为JavaScript增加了许多融入发展方

      大小:23 MBJS程序设计

      点击下载
    • JavaScript数据可视化编程

      JavaScript数据可视化编程

      大小:61.8 MBjs编程

      点击下载
    • 精通JavaScript

      精通JavaScript

      精通JavaScript(第2版) 是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

      大小:33.5 MBJavaScript

      点击下载
    • JavaScript+Vue+React全程实例

      JavaScript+Vue+React全程实例

      这书根据基础知识与开发实践活动紧密结合的观念,选萃当今简易、好用和时兴的百余个JavaScript编码案例,协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂,包含了JavaScript前端开发开发的各个方面。

      大小:59150 MB MJS实例

      点击下载
    • JavaScript框架设计

      JavaScript框架设计

      JavaScript,框架设计

      大小:286.4 MBjs框架

      点击下载
    • 大型JavaScript应用最佳实践指南

      大型JavaScript应用最佳实践指南

      大小:35 MBJavaScript

      点击下载

    学习笔记