前言: 仿微信通讯录搜索功能,通过汉字或拼音首字母找到匹配的联系人并显示匹配的位置 一:先看效果图 ? 字母索引 ?...搜索匹配 二:功能分析 1:汉字转拼音 通讯录汉字转拼音(首个字符当考虑姓氏多音字), 现在转换拼音常见的有pinyin4j和tinypinyin, pinyin4j的功能强大,包含声调多音字,tinypinyin...执行快占用内存少, 如果只是简单匹配通讯录,建议使用tinypinyin,用法也很简单这里不详细介绍 拼音类 public class CNPinyin <T extends CN implements...Serializable, Comparable<CNPinyin<T { /** * 对应首字首拼音字母 */ char firstChar; /** * 所有字符中的拼音首字母...; i++) { String pat = cnPinyin.pinyins[i]; if (pat.length() = keyword.length()) {//首个位置索引
效果大概就是这样,右边是字母索引效果 做开发的时候，经常碰到产品经理设计出来的界面是参考IOS控件设计出来的 ，比如上图效果 ios有个控件是UIPickerView 就是可以上下滑动 并有些3d...另外右边是个字母索引条。想必大家都做过，就不一一粘贴代码了。我将这个整理出来一个demo。
开门见山-IndexBar 不管是在QQ上，还是在163的邮箱中，或者自己手机的通讯录中，右侧都会躺着一个这个玩意儿，我姑且不造官方有没有相关的东西，或者大家约定俗成的称呼这个玩意儿叫什么，反正我就叫它索引条...IndexBar从整体样式上（我观察的哈），分为两种，一种就是不管三七二十一，26个字母糊糊的贴上去的那种，还有一种就是根据当前的具体内容，只展示相关的首字母的！...实现思路 这个问题要一分为二来看，首先是怎么把26个字母画出来，然后才是怎么去识别触摸对应的是哪个字母！！...触摸的相关状态添加 首先是触摸到这个索引条，背景加深，这个肯定就是走touch事件了嘛，在ACTION_DOWN的时候修改相关状态，在ACTION_UP的时候，再次刷新相关状态咯。...点击相关回调 用户看到的都是表象，触摸到的肯定是某一个坐标值，这个坐标应该对应这26个字母中的某一个字母的所在的坐标！
概述 本文讲述如何在前端实现城市首字母导航的效果。...map.getView().setZoom(8); }); } } } }) } //汉字拼音首字母列表...19968) return ch; //dealWithOthers(ch); //检查是否是多音字,是按多音字处理,不是就直接在strChineseFirstPY字符串中找对应的首字母
final static class ViewHolder { TextView tvTitle; } /** * 根据ListView的当前位置获取分类的首字母的...Char ascii值获取其第一次出现该首字母的位置 */ public int getPositionForSection(int section) { for (int...{ return i; } } return -1; } /** * 提取英文的首字母...，非英文字母用#代替。...letter) { String sortStr = letter.trim().substring(0, 1).toUpperCase(); // 正则表达式，判断首字母是否是英文字母
主要有两个 indexOf()：在数组中查找给定元素的第一个索引 如果存在返回索引不存在返回-1；该函数只返回第一个满足条件的元素索引 var arr = ['a','b','c','b'] console.log...arr.indexOf('b'))//返回1 console.log(arr.indexOf('d'))//返回-1 lastIndexOf() 与功能一样，不过该函数是从数组后面开始查找的，返回元素的索引是正确的索引...如果存在返回索引不存在返回-1 var arr = ['a','b','c','b'] console.log(arr.indexOf('b'))//返回1 console.log(
这两天需要重新拿来使用，发现效果虽然做出来了，不过思路不太对，就重新参考写了一个，用法也更为简单了 首要的自然是需要继承View绘制出侧边栏，并向外提供一个监听字母索引变化的方法 /** * 作者：叶应是叶...break; } invalidate(); return true; } @Override protected void onDraw(Canvas canvas) { if (hit) { //字母索引条背景色...context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } } 在侧边栏时，中间会显示当前滑动指向的字母...tv_hint.setVisibility(View.INVISIBLE); } } } 这里也提供代码下载：LetterIndexView 总结 以上所述是小编给大家介绍的Android 实现带字母索引的侧边栏功能
Android开发之 仿微信通讯录 (二)侧边首字母导航控件 import android.content.Context import android.graphics.Canvas import android.graphics.Color
首先需要一个通讯录列表，其次是字母列表。 字母列表很简单。 第一种方法：直接用fromCharCode，for循环遍历拿到26个英文字母。...换句话说，如果通讯录只有ABCDEFG这几个首字母的联系人，你把26个都弄上去有点不太合适。 第二种方法：也是相对简单的，直接从通讯录列表拿到字母。当然，这种方法需要后端给你对应的数据结构。...peoArray: [],//通讯录列表 }; }, computed: {}, mounted() { // 获取26个英文字母大写 // for (...var i = 0; i < 26; i++) { // this.letter.push(String.fromCharCode(65 + i)) // } // 只获取通讯录字母...refs.box.style.marginTop = 0; // 开启导航后，上边距默认清零 let target = document.getElementById("peo" + item); //获取每个字母通讯录对象
indexBar 项目开发中经常会使用到indexBar点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置，完成快速检索功能 需要配合该组建使用的是把你的列表数据转换成对应的汉字的首字母完成该功能...------------------- Z -------------------- & 示例代码demo https://github.com/zhangrongwu/indexBar bug 侧边索引无法点击
= null){ contentsArray[i] = new Array(); // js动态构造二维数组 contentsArray[i][0] = contents[i]['id'...contents[i][1] ); // 中文转拼音 contentsArray[i][2] = contentsArray[i][1].substring(0,1); // 获取拼音首字母... var number = getIndexByZM(contentsArray[i][2]); // 获取字母对应下标 //alert( "id:" + contentsArray...[i][0] + ",拼音:" + contentsArray[i][1] + ", 中文：" + contents[i][0] + ",首字母：" + contentsArray[i][2] + "...| getIndexByZM(ZM) | 由字母获取字母下标 '; } function pushInZone(index,content,id){ if ( index == null &
本文实例讲述了Android开发之自定义view实现通讯录列表A~Z字母提示效果。...void onTouchingLetterChanged(String s); } } 然后我在Activity中OnTouchingLetterChangedListener中监听手指触摸到了哪个字母...，然后让列表跳转到对应的位置， 弹出首字母提示框： private class LetterListViewListener implements OnTouchingLetterChangedListener...，那么他对应的sort_key就是：ZHANG张SAN三，这样一来就容易多了： //获得汉语拼音首字母 private String getAlpha(String str) { if (str ==...str.trim().length() == 0) { return "#"; } char c = str.trim().substring(0, 1).charAt(0); // 正则表达式，判断首字母是否是英文字母
Unicode编码:小写字母a-z的code为97 - 122，大写字母A-Z的code为65 - 90 统计大写字母的个数 var str ="abcABCadDGSDVBSDVDSVdavver"...str[i].charCodeAt() if(char>=65&&char<=90){ count++ } } console.log(count+'个') //大写字母共...15个 小写字母的个数 var str ="abcABCadDGSDVBSDVDSVdavver" var count=0 for(let i = 0;i<str.length;i++){ var...str[i].charCodeAt() if(char>=97&&char<=122){ count++ } } console.log(count+'个') //小写字母共
/vue.min.js"> {{$key}}=>{{i}}=>{{$index}}... 解释： 键名：{{KaTeX parse error: Expected 'EOF', got '}' at position 4: key}̲} 键值：{{i}} 键索引
//生成大写字母 A的Unicode值为65 function generateBig_1(){ var str = []; for(var i=65;i<91;i++){...str.push(String.fromCharCode(i)); } return str; } //生成大写字母 a的Unicode值为97 function generateSmall
英文字符串首字母大写 /** * 方法一：js字符串切割 * @param {*} str */ function firstToUpper1(str...return str.trim().toLowerCase().replace(str[0], str[0].toUpperCase()); } /** * 方法二：js...return $1.toUpperCase() + $2.toLowerCase(); }); } /** * 方法三：js
var list = [1, 2, 3, 4, 5, 6, 7, 8] var index = list.map(item => item).index...
在学习vue实现手机通讯录的功能之前，我们首先要了解如何将汉字转为拼音并获取其首字母，以下为汉字转拼音插件： 1. 新建 const.js 文件，定义常量。...新建 vue-py.js 文件，实现汉字转拼音功能： import { pinyin } from '..../const.js' export default { chineseToPinYin: function (l1) { var l2 = l1.length var I1 = ''...vue设置手机通讯录数据循环遍历数据格式。 1. 设置变量。...data(){ return { //根据通讯录名字得到的首字母 contacts:[], //处理过后的相应数据 listData: [], } }, 2.
function compare(current, latest) { var a = current.split(/./); var b = ...
大家好，今天在浏览 css-tricks.com 这个网站时，看到一个浮动节标题的列表案例，就是简简单单的用 CSS + HTML 实现了一个我们会经常遇到通讯录列表需求（按字母吸附滑动列表），以前实现老麻烦了
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
