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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
React如何创建组件
Jun 27 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
PHP文件操作实现代码分享
2011/09/01 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
javascript 闭包
2011/09/15 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
vue代码分割的实现(codesplit)
2018/11/13 Javascript
js实现点击生成随机div
2020/01/16 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Django中使用Celery的教程详解
2018/08/24 Python
如何在django中运行scrapy框架
2020/04/22 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
建筑工程自我鉴定
2013/10/18 职场文书
体育教师自我鉴定
2014/02/12 职场文书
实验室标语
2014/06/21 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
烈士陵园观后感
2015/06/08 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang