JS实现移动端按首字母检索城市列表附源码下载
时间:2019-03-30
本文章向大家介绍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实现移动端按首字母检索城市列表,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Team Foundation Server 2010 – Basic Installation
- 富文本编辑器的一键排版功能
- 通过ProGet搭建一个内部的Nuget服务器
- Mercury Editor学习心得
- 无意禁止使用:英伟达官方回应GeForce软件条款更改
- Ext JS 6 新特性和工具
- 为你的WordPress 博客文章页面增加多彩排版条
- java: web应用中不经意的内存泄露
- java: web应用中不经意的内存泄露
- velocity模板引擎学习(4)-在standalone的java application中使用velocity及velocity-tools
- mac上开启ftp
- Web前端开发的四个阶段
- 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus
- 关于把本地应用封装成windows app发布审核通不过的问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 前端|动态发光按钮
- Windows系统命令拼接
- 利用Hexo打造属于自己的网页版简历
- RCE远程控制Windows服务器——以win10虚拟机为例
- 解决InnoDB: Table mysql/innodb_index_stats has length mismatch
- R语言中对文本数据进行主题模型topic modeling分析
- QT学习第3天:QSlider使用方法
- qt学习第2天:QRadioButtonTest+ButtonGroup单选后提示消息,QComBox
- Python使用矩阵分解法找到类似的音乐
- SpringBoot集成ELK实现日志收集实践
- python在Scikit-learn中用决策树和随机森林预测NBA获胜者
- R语言:用R语言填补缺失的数据
- R语言如何和何时使用glmnet岭回归
- r语言中对LASSO回归,Ridge岭回归和Elastic Net模型实现
- cmd里如何查看历史命令并执行