JS实现移动端按首字母检索城市列表附源码下载


Posted in Javascript onJuly 05, 2017

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

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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
ext实现完整的登录代码
Aug 08 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
javascript无刷新评论实现方法
May 13 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 #Javascript
webstorm添加vue.js支持的方法教程
Jul 05 #Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 #Javascript
vue router2.0二级路由的简单使用
Jul 05 #Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 #Javascript
AngularJS实现进度条功能示例
Jul 05 #Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 #Javascript
You might like
加速XP搜索功能堪比vista
2007/03/22 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
Yii框架登录流程分析
2014/12/03 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
JavaScript Accessor实现说明
2010/12/06 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
python打包多类型文件的操作方法
2020/09/21 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
什么是索引指示器
2012/08/20 面试题
一些Solaris面试题
2015/12/22 面试题
拾金不昧表扬信范文
2014/01/11 职场文书
实习生求职自荐信
2014/02/07 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
一文简单了解MySQL前缀索引
2022/04/03 MySQL