西红门做网站,wordpress文章调用插件,青少年思想道德建设网站,响应式网站上图是效果图#xff0c;三个问题
访问电话通讯录#xff0c;拿数据拿到用户的联系人数组对象#xff0c;之后根据A-Z排序根据字母索引快速搜索
首先说数据怎么拿 - 社区有指导https://ask.dcloud.net.cn/question/64117 uniapp 调取通讯录 // #ifdef APP-PLUSplus.contac… 上图是效果图三个问题
访问电话通讯录拿数据拿到用户的联系人数组对象之后根据A-Z排序根据字母索引快速搜索
首先说数据怎么拿 - 社区有指导https://ask.dcloud.net.cn/question/64117 uniapp 调取通讯录 // #ifdef APP-PLUSplus.contacts.getAddressBook( plus.contacts.ADDRESSBOOK_PHONE, function( addressbook ) {// 查找联系人 addressbook.find([displayName,phoneNumbers],function(contacts){ console.log(获取联系人成功) console.log(JSON.stringify(contacts)) ; //拿到的数据}, function () { uni.showToast({ title: 获取联系人失败, duration: 2000 }) },{multiple:true}); }, function ( e ) {alert( Get address book failed: e.message );})
// #endif 这样就实现了第一步接下来分析拿到的数据做处理。 { id: 6,rawId: null,target: 0,displayName: Ann,name: null,nickname: null,phoneNumbers: [{id: 0,pref: false,type: home,value: 895694582}],emails: null,addresses: null,ims: null,organizations: null,birthday: null,note: null,photos: null,categories: null,urls: null }从这部分数据看有用到的是 {displayName:Ann, phoneNumbers:[ ... ]}我们将换成另一种数据结果 pySort:function(arrList){var $this this;if(!String.prototype.localeCompare)return null;var letters ABCDEFGHIJKLMNOPQRSTUVWXYZ#.split();//ABCDEFGHJKLMNOPQRSTWXYZvar zh 阿八嚓哒妸发旮哈*讥咔垃痳拏噢妑七呥涩它**穵夕丫帀.split();var result [];var curr;for(let i0;iletters.length;i){curr {letter: letters[i], data:[]}; //字母对象data数据arrList.forEach((n){let initial n.displayName.charAt(0);//截取第一个字符if(initialletters[i]||initialletters[i].toLowerCase()){//首字符是英文的curr.data.push(n);}else if(zh[i]!*$this.isChinese(initial)){//判断是否是无汉字,是否是中文let chinaName pinyin.getFullChars(initial).charAt(0); //直接使用pinyin中方法if(chinaNameletters[i]||chinaNameletters[i].toLowerCase()){//首字符是英文的curr.data.push(n);}}if(letters[i]#!$this.isChar(initial)!$this.isChinese(initial)){curr.data.push(n);}})result.push(curr)}this.contactList result; //contactList 是data中定义的 []
},
isChinese:function(temp){var re/[^\u4E00-\u9FA5]/;if (re.test(temp)){return false;}return true ;
},
isChar:function(char){var reg /[A-Za-z]/;if (!reg.test(char)){return false ;}return true ;
},截取姓名的首字符英文可以直接比对数字字符也可以直接比对中文需要将转成拼音再取首字母 汉字转拼音js下载路径(如果无效自行处理) 链接https://pan.baidu.com/s/1NZ4noIgHv2HSzZW6yBRTxA 密码2kv1 注意的是下载的这份js不能直接在vue项目中使用,需要在js文件中加 export{pinyin
}
//页面引入
import {pinyin} from ../../common/Convert_Pinyin.js;这样排序做完。接下来就是索引部分。 其实可以直接使用插件市场的插件地址附上(https://ext.dcloud.net.cn/plugin?id375#detail) 但是可以更简单 scroll-view classscroll-list :scroll-into-viewscrollViewId scroll-ytrue scroll-with-animation :style{height:winHeight px}view v-for(item,index) in contactList :keyindex :iditem.letter # ? indexed-list-YZ :indexed-list- item.letterview classletter-title v-ifitem.dataitem.data.length iditem.letter{{item.letter}}/viewview ......./view/view
/scroll-view
view classright-menuview v-for(i,index) in Letters :keyindex clickjumper(i,index) :classjumperIndex i?letter-item active:letter-item{{i}}/view
/view这里的scroll-view是关键scroll-view scroll-into-view 与 子元素的id结合使用。 data() {return {jumperIndex:A,contactList:[],scrollViewId:,winHeight: 0,itemHeight: 0,Letters:[A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,#],}
},
methods:{jumper(event,i){this.jumperIndex event;let len this.contactList[i].data.length;if(event #){this.scrollViewId indexed-list-YZ;return}if(len0){console.log(111);this.scrollViewId indexed-list- event;}},
},
onLoad(){ let winHeight uni.getSystemInfoSync().windowHeight;this.itemHeight winHeight / 26;this.winHeight winHeight;
},主要代码主要功能完结。
