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 相关文章推荐
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
JavaScript函数模式详解
Nov 07 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
javascript this详细介绍
Sep 19 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
js实现抽奖效果
Mar 27 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 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
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
父母对孩子说的话
2014/04/12 职场文书
初一学生评语大全
2014/04/24 职场文书
厨房管理计划书
2014/04/27 职场文书
大学生暑期实践报告
2015/07/13 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers