当前位置:首页 > 编程教程 > javascript技术文章 > JS实现移动端按首字母检索城市列表附源码下载

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

  • 发布时间:
  • 作者:码农之家
  • 点击:157

这篇文章主要知识点是关于js、首字母检索、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程
  • 类型:物联网大小:60.8 MB格式:PDF作者:赵英杰
立即下载

Tags:JS 首字母检索 

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.907820

JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】

本文实例讲述了JavaScript数据结构与算法之检索算法。分享给大家供大家参考,具体如下: javascript数据结构与算法---检索算法(顺序查找、最大最小值、自组织查询) 一、顺序查找法 /** 顺序查找法** 顺序查找法只要从列表的第一个元素开始循环,然后逐个与要查找的数据进行比较。* 如果匹配到了,则结束查找。* 如果到了列表的结尾也没有匹配到,那么这个数据就不存在于这个列表中。* */function seqSearch(arr, data) { for (var i = 0; i arr.length; ++i) { if (arr[i] == data) { return i; } } return -1;}function dispArr(arr) { var str = ""; for (var i = 0; i arr.length; ++i) { str += arr[i] + " "; if ((i 0)(i % 10 == 0)) { str += "\n"; } } console.log(str);}var nums = [];for (var i = 0; i 100; ++i) { nums[i] = Math.floor(Math.random() * 101);}dispArr(nums);console.log("Enter a number to search for: ");var num = parseInt(23);console.log();var index = seqSearch(……

网友NO.888633

JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】

本文实例讲述了JavaScript数据结构与算法之检索算法。分享给大家供大家参考,具体如下: javascript数据结构与算法---检索算法(二分查找法、计算重复次数) /*只需要查找元素是否存在数组,可以先将数组排序,再使用二分查找法*/function qSort(arr){ if (arr.length == 0) { return []; } var left = [];//存储小于基准值 var right = [];//存储大于基准值 var pivot = arr[0]; for (var i = 1; i arr.length; i++) { if (arr[i] pivot) { left.push(arr[i]); } else { right.push(arr[i]); } } return qSort(left).concat(pivot, qSort(right));//递归}/*二分查找法,基本原理如下:* 将数组的第一个位置设置为下边界(0).将数组的最后一个元素所在的位置设置为上边界(数组的长度减1)。* 若下边界等于或小于上边界,则做如下操作:* (1).将中点设置为(上边界加上下边界) 除以2.* (2). 如果中点的元素小于查询的值,则将下边界设置为中……

网友NO.725485

JavaScript字符串检索字符的方法

在字符串中检索字符的几种方式,供大家参考,具体内容如下 var text="abcdefgh你好,很高兴认识你!"; var str1="abc"; var str2="def"; var str3="ABC"; var str4="很高兴"; function isContain(str,substr){ return new RegExp(substr).test(str); } console.log(isContain(text,str1));//true console.log(isContain(text,str4));//true console.log(text.indexOf(str1));//0,如果匹配则返回其位置 console.log(text.indexOf(str2));//3 console.log(text.indexOf(str4));//11 console.log(text.indexOf(str3));//-1,如果不匹配则返回-1 console.log(text.indexOf(str1,1));//-1 第二个参数表示从下标为1的地方开始找 console.log(text.lastIndexOf(str1,1));//0,从后向前检索,返回其下标 console.log(text.lastIndexOf(str2));//3 console.log(text.substring(0,5)); //abcde 提取下标之间的字符串,包括第一个参数,不包括第二个参数 console.log(text.slice(0,5));//abcde 根substring作用基本相同 console.log(text.substr(0,3));//abc,……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757